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

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


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

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

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

jQuery('body').swipe({
	swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
		console.log(direction);
	}
});

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

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

jQuery('body').swipe( {
    swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData, currentDirection)
    {
        if (phase=="start"){
            // сработает в начале swipe
        }	
        if (phase=="end"){ 
            //сработает через 20 пикселей то число которое выбрали в threshold
            if (direction == 'left') {
                //сработает при движении влево
            }
            if (direction == 'right') {
                //сработает при движении вправо
            }
            if (direction == 'up') {
                //сработает при движении вверх
            }
            if (direction == 'down') {
                //сработает при движении вниз
            }
	},
	triggerOnTouchEnd:false,
	threshold:20 // сработает через 20 пикселей
});
Параметры:

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

jQuery(event.target)

phase

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

direction

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

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

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

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

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

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

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


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