vérifier si touchend vient après un glisser

J'ai un code qui change la classe d'un tableau. Sur un téléphone, parfois, la table est trop grande pour l'écran et l'utilisateur de glisser/défilement sur le point de voir le contenu. Cependant, quand ils touchez et faites glisser la table autour de, il déclenche touchend sur chaque bouffée.

Comment puis-je tester pour voir si l'touchend est venu suite à un toucher-glisser? J'ai essayé de suivi dragstart et dragend mais je ne pouvais pas obtenir que cela fonctionne, et il semble un peu élégante approche. Est-il quelque chose que je pourrais ajouter ci-dessous et qui aurait essentiellement pour effet de déterminer, "ce touchend viennent à la fin d'un boulet?"

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

Mes remerciements d'avance pour votre aide.

PS - en utilisant les dernières jquery, et tandis que régulier sur les œuvres, il est très lent par rapport à touchend.

InformationsquelleAutor Konrad Lawson | 2012-10-02
  1. 63

    Utiliser deux auditeurs:

    D'abord définir une variable à false:

    var dragging = false;

    Puis ontouchmove définir les faisant glisser à vrai

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

    Puis faites glisser terminée, vérifier pour voir si le glissement est vrai, et si donc le considérer comme une traîné de contact:

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

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

    La touche de fin sera encore le feu, mais se terminent avant votre robinet script est exécuté.

    Pour s'assurer que la prochaine fois que vous touchez ce n'est pas déjà traîné, réinitialiser le dos à faux sur la touche vers le bas.

    $("body").on("touchstart", function(){
    dragging = false;
});
    • dans le if de touchend je crois que vous devriez aussi glisser dos à faux. Autre que cela, il travaille à nice.
    • Pas besoin; la prochaine fois que vous touchez, il va le mettre dos à faux à nouveau.
    • Pourquoi serait-il en revenir à false si vous n'avez pas de code de le réinitialiser?
    • Vous avez raison, j'ai mis à jour la réponse
    • malheureusement?
    • j'étais en colère que cette contre-intuitive, la solution est la meilleure façon de s'attaquer au problème. votre réponse a bien aidé et j'ai voté pour elle.
    • J'accepte cette réponse, c'est de la saleté, mais hélas rien de mieux a été ajouté à la spéc.: (
    • Il y a beaucoup de hacky fixe sur ici pour ce problème, mais c'est la meilleure réponse. Safari est une blague

    InformationsquelleAutor lededje
  2. 1

    Ressemble à une solution à mon problème se trouve ici:

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

    Ce morceau de code détecte tout mouvement après les évènements touchstart pour annuler appuyez sur le comportement après 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;
};

    Plus ici:
    https://developers.google.com/mobile/articles/fast_buttons

    InformationsquelleAutor Konrad Lawson