jTap — событие клика для сенсорных устройств

    jTap - tap event for jQuery

    Привет, %username%!

    Начну с того, что с каждым новым днем волна мобильных устройств все более накрывает людей. И, как повелось, практически все новейшие устройства обладают сенсорным экраном. Да что уж говорить, сейчас просматривать любимую соц. сеть можно даже с некоторых холодильников. Доминирование настольных компьютеров — сейчас это как рассказы о динозаврах — такое мы уже вряд ли увидим.

    На мой взгляд, самым значительным изобретением в мире веб-разработок, за последние несколько лет, стали CSS media queries — они позволяют организовывать внешний вид веб-приложения так, что он в корне может отличатся на разных разрешениях экрана. Любой форм-фактор девайса может иметь собственное представление дизайна и это прекрасно. Мы все это знаем, но речь пойдет не об этом, а о обработке событий…

    Зачем же нужен jTap?


    Помехой при адаптации приложения для моб. устройств стает то, что сенсорный экран не имеет привычных нам событий управления. Установив обработчик по типу события «click» на настольном компьютере и, например, планшете мы не получим одинаковый результат работы. Возьмем строку кода для примера:

    $('element').click(handler);
    

    и представим что функция handler должна показывать нам меню. На ПК все отработает безукоризненно, а вот на тачскрине — с задержкой, равной ~300ms. Для большинства людей это не критично и кто-то, может быть, даже не заметит ее, а вот для перфекционистов вроде меня — раздражительно.

    Именно по-этому мной и был написан плагин для jQuery, полное имя которого jQuery Tap Event.

    Что умеет плагин?


    Обрабатывать прикосновения к экрану и только. Его главные цели — максимальная простота и работа без нареканий.

    Кто-то может поспорить и сказать что лучше использовать уже написанные расширения с полным набором событий для touch-устройств. И он окажется прав в тех случаях, когда проект будет требовать обработки широкого спектра событий. Но, зачастую, если речь идет о веб-сайтах, достаточно пары типов: swipe и tap.

    Разысканные мной наработки либо работали плохо, либо не так как надо, либо не работали вовсе. Некоторые из них мне нравились, но имели пяток ненужных мне типов событий и, как следствие, внушительную часть лишнего кода. Это и стало отправной точкой для разработки своего варианта.

    p.s. Примечательной особенностью плагина является его универсальность. Tap event будет работать одинаково как на ПК, так и на устройстве с сенсорным экраном.

    Как использовать?


    «Проще паренной репы»!

    Подключите файл плагина после jQuery следующей строкой:

    <script src="jquery.tap.min.js"></script>
    

    Осталось произнести «Вуаля!» и установить обработчики там, где это необходимо. Делается это так:

    $('selector').tap(handler);
    

    Важно: метод «tap» можно и нужно проверить на существование следующим образом:

    $.isFunction($.fn.tap);
    

    и, для отказоустойчивости, поступить следующим образом:

    var clickEvent = $.isFunction($.fn.tap) ? 'tap' : 'click';
    
    $('selector')[clickEvent](handler);
    

    Но, все же, лучше просто использовать делегирование события:

    $('selector').on('tap', handler);
    

    В завершение...


    На этом все. Плагин небольшой и с узкой направленностью. Надеюсь кому-то он станет полезным.

    Напоследок размещу основные ссылки:


    Спасибо за внимание.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 30

      0
      Event: undefined
        0
        Это была моя ошибка в js для демонстрации, не в плагине. Исправил еще вчера.
        +2
        Ссылка на демонстрацию, так удобнее:
        image

        А можете в демонстрации сделать пример как стандартный click() работает без вашего плагина? Для сравнения. А то пока неочевидны преимущества.
          0
          По идее отработка touchstart/touchend нивелирует задержку срабатывания ивента click в 300 миллисекунд, что думаю, вполне себе преимущество.
            +2
            Не, я не о том. Я верю что этот плагин очень полезен и имеет преимущества.

            Я открыл ссылку автора на девайсе — вижу что кликается. Но мне не с чем сравнить, есть задержка или нет, и насколько эта задержка раздражает. Если ниже был бы другой прямоугольник со стандартным кликом (с задержкой) — преимущества были бы более наглядны.
              –1
              Вероятно, и я с этим полностью согласен, что задержка при клике в 300мс штука настолько для всех привычная (очевидная), что в примерах не нуждается.

            +1
            Сделал. Так и правда нагляднее.

            Также хочу описать некоторые особенности: зажатие ЛКМ, зажатие ЛКМ и перетаскивание, нажатие колесиком и множественные нажатия — событие «click» выполняется, «tap» — нет.
              0
              Хм, да, так гораздо нагляднее.
              Самое забавное, что я всегда думал что эта пауза — это у меня safari в телефоне тормозит. =(
              +1
              в хроме можно установить расширение, чтобы текующую ссылку в qr код сгенерить link
              P.S. удобно когда надо кучу плагинов попробыват на любом мобильном устройстве
              +1
              Hammerjs не подошёл?)
                0
                Хаммер весит значительно больше и как-то странновато интегрируется с jQuery.
                  +1
                  Hammerjs помимо тапа поддерживает гестуры, так что не удивительно что он весит больше. Да, просто что бы повысить отзывчивость кнопок в вашем сервисе оно не нужно, но если вы захотите добавить свайпы и прочие модные штуки, то выбор очевиден.
                    0
                    Бесспорно.
                +1
                Что-то не работает.
                Пробовал на двух устройствах (телефон Android 4.0.3 и планшет Android 4.1.1) и в четырех браузерах (системный, Opera Classic, Firefox, UC).
                Событие click везде работает нормально.
                Правый квадрат вашей демки как-то очень неохотно, через раз, срабатывает только на 2-х комбинациях из 8-ми: телефон/системный и планшет/опера.
                Во всех прочих комбинациях многократные и настойчивые тапы не привели ни какому результату.
                  0
                  Андроида, к сожалению, под рукой нет. Завтра на работе все проверю.

                  Тестировал на iPhone, iPod, iPad и в Chrome DT.
                    0
                    Подтверждаю! Второй тап не обрабатывается. Видать браузер шлёт двойной тап или хз что.
                      0
                      Проверил на Android 2.3 и 4.0.3 в стандартных браузерах и, на первом, в Opera Mini — все работает.

                      Скрин с Android 2.3

                      Скрин с Android 4.0.3
                        0
                        Вы попробуйте быстро тыкать несколько раз. Первый раз и у меня тыкается оок.
                        0
                        браузер ничего о тапах не знает. тап это быстрая смена событий touchstart/touchend. Точно так же как и для click mousedown/mouseup
                      0
                      было бы круто если бы вы оформили это как bower пакет и приделали туда объявление в стиле amd (опциональное, которое типа проверяет наличие нужных функций и если есть все что надо объявляет через define, пример можно например в коде lodash посмотреть).
                        0
                        Какая в итоге задержка стала с этим плагином?
                          0
                          Минимальной (~20-50ms). Попробуйте демо.
                          0
                          Идея взята отсюда? github.com/ftlabs/fastclick
                          Или просто совпадение?
                            0
                            Идея, если так можно выразится, вынужденная. В посте об этом написано.
                              0
                              Простите, а есть еще идеи как обрабатывать тач-события? Имплементаций разнящихся уже мильен.
                              0
                              Интересно, как Ваш tap взаимодействует с hover. Например, если пункт меню подсвечивается при наведении и одновременно имеет событие click. Это типичная проблема на ios-устройстве: сначала срабатывает «ховер», а при втором клике уже «клик». Проверить сейчас сам не могу, но написать об этом стоило бы.
                                +1
                                Добавил в демо три состояния: hover, focus, active. Срабатывает сразу.
                                0
                                А что со swipe? Был бы рад увидеть и их в этом или дополнительном таком же минималистичном плагине.
                                0
                                И вопрос наполовину по теме (это со всеми плагинами так): если привязать tap event к объекту, расположенному на верхнем диве, тап по которому скрывает этот див, то через те самые 300мс происходит дополнительный click event по тому, что находится под этим дивом (в моём случае активируется input), есть способ это побороть?
                                Перепробовал уже в различных местах preventDefault, stopPropagation, return false, отмену десктопных событий; помогает только setTimeout(360)…

                                Only users with full accounts can post comments. Log in, please.