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 — текущее направление движения тача

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