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

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