jquery - library - Determinar la dirección vertical de un touchmove

touchstart jquery

Question

Estoy tratando de implementar un detector de sonido para tabletas para activar algunas acciones dependiendo de si se mueve hacia arriba o hacia abajo.

Probé el oyente nativo:

($document).bind(''touchmove'', function (e)
{
    alert("it worked but i don''t know the direction");
});

Pero no sé cómo determinar la dirección.

es posible?

¿O necesito usar touchstart / touchend, si necesito esto puedo determinar la dirección antes de que se detenga el movimiento táctil?

Si solo puedo hacer esto con una biblioteca externa, ¿cuál es la mejor?

Gracias.

Answer 1

Debe guardar la última posición del toque y luego compararla con la actual.
Ejemplo en bruto:

var lastY;
$(document).bind(''touchmove'', function (e){
     var currentY = e.originalEvent.touches[0].clientY;
     if(currentY > lastY){
         // moved down
     }else if(currentY < lastY){
         // moved up
     }
     lastY = currentY;
});

Answer 2

Esta solución tiene en cuenta el cambio en las direcciones que las respuestas actuales no tienen. La solución a continuación también se ocupa de la sensibilidad al tacto; esto ocurre cuando el usuario se está moviendo en una dirección, pero al tocarla, el dedo del usuario empuja en una dirección diferente y desordena la dirección real.

 var y = 0; //current y pos
 var sy = y; //previous y pos
 var error = 5; //touch sensitivity, I found between 4 and 7 to be good values. 

 function move(e) {
    //get current y pos
    y = e.pageY;

    //ingnore user jitter
    if (Math.abs(y - sy) > error) {
        //find direction of y
        if (y > sy) {
            //move down 
        } else {
            //move up
        }
        //store current y pos
        sy = y;
    }
}

Answer 3

He creado un script que asegurará que un elemento dentro de su documento se desplazará sin desplazar nada más, incluido el cuerpo. Esto funciona en un navegador, así como en un dispositivo móvil / tableta.

// desktop scroll
$( ''.scrollable'' ).bind( ''mousewheel DOMMouseScroll'', function ( e ) {
    var e0 = e.originalEvent,
    delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += delta * -1;
    e.preventDefault();
});

var lastY;
var currentY;

// reset touch position on touchstart
$(''.scrollable'').bind(''touchstart'', function (e){
    var currentY = e.originalEvent.touches[0].clientY;
    lastY = currentY;
    e.preventDefault();
});

// get movement and scroll the same way
$(''.scrollable'').bind(''touchmove'', function (e){
    var currentY = e.originalEvent.touches[0].clientY;
    delta = currentY - lastY;

    this.scrollTop += delta * -1;
    lastY = currentY;
    e.preventDefault();
});

Answer 4

La respuesta de Aureliano parece ser muy precisa, pero de alguna manera no me funcionó, por lo que, al darle los créditos, decidí mejorar su respuesta con lo siguiente:

var ts;
$(document).bind(''touchstart'', function(e) {
    ts = e.originalEvent.touches[0].clientY;
});

$(document).bind(''touchmove'', function(e) {
    var te = e.originalEvent.changedTouches[0].clientY;
    if (ts > te) {
        console.log(''down'');
    } else {
        console.log(''up'');
    }
});

Simplemente cambié el evento ''touchmove'' por ''touchmove''

Answer 5

Tuve algunos problemas en Ipad y lo resolví con dos eventos.

var ts;
$(document).bind(''touchstart'', function (e){
   ts = e.originalEvent.touches[0].clientY;
});

$(document).bind(''touchend'', function (e){
   var te = e.originalEvent.changedTouches[0].clientY;
   if(ts > te+5){
      slide_down();
   }else if(ts < te-5){
      slide_up();
   }
});