Detectar izquierda / derecha-deslizar en los dispositivos táctiles, pero permitir arriba / abajo-desplazamiento

Hay un "bug" en la respuesta aceptada. Si no usas Chrome en Android, sino el navegador integrado o una "webview" (para una aplicación híbrida html5), por ejemplo, no se detecta el deslizamiento.

Descubrí que el evento no se dispara, debido al comportamiento normal del desplazamiento. Así que agregar " e. preventDefault ();" en touchmove lo arreglaría o lo arreglaría Eric Fuller en la respuesta aceptada.

Es un buen recorte, pero en una aplicación web móvil o sitio web esto podría resultar en un mal desplazamiento tartamudeo, porque los eventos táctiles se observan todo el tiempo.

Así que decidí construir algo nuevo. No es tan cómodo como tener nuevos oyentes de eventos, pero es lo suficientemente cómodo para mis necesidades y es performat.

function detectswipe(el,func) {
  swipe_det = new Object();
  swipe_det.sX = 0;
  swipe_det.sY = 0;
  swipe_det.eX = 0;
  swipe_det.eY = 0;
  var min_x = 20;  //min x swipe for horizontal swipe
  var max_x = 40;  //max x difference for vertical swipe
  var min_y = 40;  //min y swipe for vertical swipe
  var max_y = 50;  //max y difference for horizontal swipe
  var direc = "";
  ele = document.getElementById(el);
  ele.addEventListener('touchstart',function(e){
    var t = e.touches[0];
    swipe_det.sX = t.screenX; 
    swipe_det.sY = t.screenY;
  },false);
  ele.addEventListener('touchmove',function(e){
    e.preventDefault();
    var t = e.touches[0];
    swipe_det.eX = t.screenX; 
    swipe_det.eY = t.screenY;    
  },false);
  ele.addEventListener('touchend',function(e){
    //horizontal detection
    if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y)))) {
      if(swipe_det.eX > swipe_det.sX) direc = "r";
      else direc = "l";
    }
    //vertical detection
    if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x)))) {
      if(swipe_det.eY > swipe_det.sY) direc = "d";
      else direc = "u";
    }

    if (direc != "") {
      if(typeof func == 'function') func(el,direc);
    }
    direc = "";
  },false);  
}

myfunction(el,d) {
  alert("you swiped on element with id '"+el+"' to "+d+" direction");
}

Para usar la función simplemente úsala como

detectswipe('an_element_id',myfunction);

detectswipe('an_other_element_id',my_other_function);

Si se detecta un golpe,se llama a la función "myfunction" con el parámetro element-id y "l,r,u,d" (izquierda,derecha,arriba, abajo).

Ejemplo: http://jsfiddle.net/rvuayqeo/1/

Todos estos códigos necesitan mejoras (como la mayoría de los códigos que puedes encontrar en la manipulación táctil).

Al jugar con el evento touch, tenga en cuenta que el usuario tiene más de un dedo, que un toque tiene un identificador y que la lista touches representa todos los toques actuales en la superficie, incluso los toques que no se han movido.

Así que el proceso es relativamente simple:

1. Ontouchstart: obtener el primer toque cambiado (no event.originalEvent.touches propiedad, pero event.originalEvent.changedTouches uno). Registre su identificador con event.originalEvent.changedTouches[0].identifier y toque las propiedades para buscar (pageX/pageY o clientX/clientY que son bastante útiles en combinación con el método DOMElement.getBoundingClientRect() );

2. Ontouchmove: asegúrese de que el toque actual esté en la lista changedTouches con event.originalEvent.changedTouches.identifiedTouch( identifier ). Si no devuelve nada, significa que el usuario ha movido otro toque (no el que está buscando). También registra propiedades táctiles para buscar y hacer lo que quieras con.

3. Ontouchend: una vez más, debe estar seguro de que el toque actual está en la lista changedTouches. Haga el trabajo con propiedades táctiles y finalmente deseche su identificador táctil actual.

Si quieres hacerlo más fuerte, considera varios toques (no solo uno) para observar.

Más información sobre TouchEvent, TouchList y Touch on: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

Detectando izquierda y derecha mientras el tacto está todavía en movimiento.

Esto se hace guardando la última posición y usando timeout para borrar la última posición después de touchmove stop.

var currentX;
var lastX = 0;
var lastT;
$(document).bind('touchmove', function(e) {
    // If still moving clear last setTimeout
    clearTimeout(lastT);

    currentX = e.originalEvent.touches[0].clientX;

    // After stoping or first moving
    if(lastX == 0) {
        lastX = currentX;
    }

    if(currentX < lastX) {
        // Left
    } else if(currentX > lastX){
        // Right
    }

    // Save last position
    lastX = currentX;

    // Check if moving is done
    lastT = setTimeout(function() {
        lastX = 0;
    }, 100);
});