Swipe події на сенсорних пристроях у JavaScript

Кожен день сенсорні пристрої впроваджуються в наше життя. Ці пристрої мають певні події, на відміну від настільного комп’ютера. Однією з таких подій є swipe (свайп). Особливо часто з цим доводиться стикатися при розробці мобільної версії сайту.

Події дотику на сенсорних пристроях дозволяють розробникам виявляти такі жести, як проведення ліворуч, праворуч, угору чи вниз, які зазвичай використовуються для навігації чи взаємодії. Ці події можна реалізувати шляхом відстеження подій touchstart, touchmove і touchend у JavaScript. Зафіксувавши початкову позицію дотику (touchstart) і порівнявши її з кінцевою позицією (touchend), ви можете обчислити напрямок і відстань проведення.

Наприклад, гортання ліворуч відбувається, коли горизонтальна відстань між початковою та кінцевою точками є від’ємною та перевищує визначений поріг. Подібним чином ви можете перевірити вертикальне проведення, порівнявши значення осі Y.

Код:

(() => {
    let initialPoint;
    let finalPoint;
 
    document.addEventListener('touchstart', function(event) {
        initialPoint = event.changedTouches[0];
    }, false);
 
    document.addEventListener('touchend', function(event) {
        finalPoint = event.changedTouches[0];
        let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
        let yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
 
        if (xAbs > 20 || yAbs > 20) {
            if (xAbs > yAbs) {
                if (finalPoint.pageX < initialPoint.pageX) {
                    // to left
                } else {
                    // to right
                }
            } else {
                if (finalPoint.pageY < initialPoint.pageY) {
                    // to top
                } else {
                    // to down
                }
            }
        }
    }, false);
})();