Eventos swipe en dispositivos táctiles en JavaScript

Cada día se incorporan a nuestras vidas dispositivos sensoriales que, a diferencia de los de escritorio, tienen eventos específicos. Uno de estos eventos es el swipe, con el que tenemos que lidiar especialmente a menudo cuando desarrollamos una versión móvil del sitio.

Los eventos swipe en dispositivos táctiles permiten a los desarrolladores detectar gestos como deslizar el dedo hacia la izquierda, la derecha, arriba o abajo, que se utilizan habitualmente para la navegación o la interacción. Estos eventos se pueden implementar mediante el seguimiento de los eventos touchstart, touchmove y touchend en JavaScript. Al capturar la posición táctil inicial (touchstart) y compararla con la posición final (touchend), puede calcular la dirección y la distancia del deslizamiento.

Por ejemplo, un swipe hacia la izquierda se produce cuando la distancia horizontal entre los puntos de inicio y fin es negativa y supera un umbral definido. De forma similar, puede comprobar los deslizamientos verticales comparando los valores del eje Y.

Código:

(() => {
    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);
})();