jQuery touch swipe или как отследить жесты | Wiki | PWODEV
, 24.10.2017 07:58

jQuery touch swipe или как отследить жесты


Что такое жесты и какие они бывают:

  • Swipe — пролистывание как слайд, обычно используется для открытия меню жестом, провести пальцем по экрану слева на право чтобы открылось меню.
  • hold — событие долгому длинному нажатию

Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку jquery.touchSwipe.min.js. Дальше привязываем событие к нужному нам элементу:

Теперь мы можем дополнять наш сайт жестами.

Если нам нужно чтобы событие жест сработал в реальном времени или через определенное количество пикселей пишем такую функцию:

Параметры:

event — стандартный ивент, тут можно посмотреть по какому элементу сработал скрипт

phase

  • start — указывает начальную фазу события касания
  • move — указывает на событие перемещения
  • end — указывает на завершение события
  • cancel — указывает на отмену события

direction

  • left — указывает на передвижение влево
  • right — указывает на передвижение вправо
  • up — указывает на передвижение вверх
  • down — указывает на передвижение вниз
  • in — указывает на событие помещения в обьект
  • out — указывает на событие выхода из обьекта

distance — расстояние которое пользователь пролистал

duration — продолжительность пролистывания в миллисекундах

fingerCount — количество пальцев при таче

fingerData — координаты пальцев при событии тач

currentDirection — текущее направление движения тача

Сайт библиотеки плагина и документации к плагину


Добавить комментарий