Swipe события на touch устройствах

Сенсорные устройства с каждым днем все больше внедряются в нашу жизнь. Эти устройства обладают специфическими событиями, в отличии от декстопа. Одно из таких событий - это swipe (листание). Особенно часто с ним приходится сталкиваться при разработке мобильной версии сайта.

Сам код:

(() => {
    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){
                    //свайп влево
                }
                else{
                    //свайп вправо
                }
            }
            else {
                if (finalPoint.pageY < initialPoint.pageY){
                    //свайп вверх
                }
                else{
                    //свайп вниз
                }
            }
        }
    }, false);
})();
Share: