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

Привет, %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); 

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

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

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

• Демонстрация: http://firstvector.org/jTap
• jQuery Plugins: http://plugins.jquery.com/jTap/
• Репозиторий: https://github.com/BR0kEN-/jTap/

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