javascript - touchend jquery

revisando si Touchend viene después de un arrastre

Question

Tengo un código que cambia la clase de una tabla. En un teléfono, a veces la mesa será demasiado amplia para la pantalla y el usuario arrastrará / desplazarse para ver los contenidos. Sin embargo, cuando tocan y arrastran la tabla, activan el touchend en cada arrastre.

¿Cómo pruebo para ver si el touchend llegó como resultado de un toque de arrastre? Traté de rastrear dragstart y dragend pero no pude hacer que funcione y parece un enfoque poco elegante. ¿Hay algo que podría agregar a continuación que esencialmente determinaría, "¿Llegó este touchend al final de un arrastre?"

$("#resultTable").on("touchend","#resultTable td",function(){ 
        $(this).toggleClass(''stay'');
});

Gracias de antemano por su ayuda.

PD: usar el último jquery, y mientras un clic normal funciona, es muy lento en comparación con touchend.

Answer 1

Usa dos oyentes:

Primero establece una variable en falso:

var dragging = false;

Luego, ontouchmove establece arrastrando a verdadero

$("body").on("touchmove", function(){
      dragging = true;
});

Luego, al finalizar, arrastre para ver si el arrastre es verdadero y, de ser así, cuéntelo como un toque arrastrado:

$("body").on("touchend", function(){
      if (dragging)
          return;

      // wasn''t a drag, just a tap
      // more code here
});

El toque final aún se disparará, pero terminará antes de que se ejecute el guión de tap.

Para asegurarse de que la próxima vez que lo toque no esté configurado como arrastrado, reinícielo a falso al tocar hacia abajo.

$("body").on("touchstart", function(){
    dragging = false;
});

Answer 2

Diría que no puedes notar la diferencia cuando el usuario arrastra para ver más contenido o arrastrar el elemento alrededor. Creo que deberías cambiar el enfoque. Podrías detectar si se trata de un dispositivo móvil y luego dibujar un interruptor que habilite / deshabilite el movimiento del elemento.

Answer 3

Parece que una solución a mi problema se encuentra aquí:

http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript/

Este pequeño código detecta cualquier movimiento después del inicio táctil para cancelar el comportamiento del tap después de tapend.

var tapArea, moved, startX, startY;

tapArea = document.querySelector(''#list''); //element to delegate
moved = false; //flags if the finger has moved
startX = 0; //starting x coordinate
startY = 0; //starting y coordinate

//touchstart           
tapArea.ontouchstart = function(e) {

    moved = false;
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
};

//touchmove    
tapArea.ontouchmove = function(e) {

    //if finger moves more than 10px flag to cancel
    //code.google.com/mobile/articles/fast_buttons.html
    if (Math.abs(e.touches[0].clientX - startX) > 10 ||
        Math.abs(e.touches[0].clientY - startY) > 10) {
            moved = true;
    }
};

//touchend
tapArea.ontouchend = function(e) {

    e.preventDefault();

    //get element from touch point
    var element = e.changedTouches[0].target;

    //if the element is a text node, get its parent.
    if (element.nodeType === 3) { 
        element = element.parentNode;
    }

    if (!moved) {
        //check for the element type you want to capture
        if (element.tagName.toLowerCase() === ''label'') {
            alert(''tap'');
        }
    }
};

//don''t forget about touchcancel!
tapArea.ontouchcancel = function(e) {

    //reset variables
    moved = false;
    startX = 0;
    startY = 0;
};

Más aquí: https://developers.google.com/mobile/articles/fast_buttons