检查是否touchend而来的阻力后，(checking if touchend comes aft

我有一些代码，更改类的表。 在手机上，有时该表将太宽屏幕和用户将拖动/滚动即将看到的内容。 然而，当他们接触并随意拖动表，它触发touchend每拖累。

如何测试看是否touchend来为触摸拖拽的结果呢？ 我试图跟踪的dragstart和dragend但我无法得到那个工作，它似乎是一个不雅的做法。 有什么我可以添加到下面这将从根本上决定，“这篇touchend来在拖动结束？”

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

我在您的帮助表示感谢。

PS - 使用最新的jQuery，虽然经常点击的作品，这是非常缓慢相比，touchend。

Answer 1:

使用两个监听器：

首先设置一个变量设置为false：

var dragging = false;

然后ontouchmove设置拖动到真

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

然后在拖动完成后，请检查是否拖动是真实的，如果是把它作为一种拖触摸：

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

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

触摸结束仍会触发，但运行自来水脚本之前将自行终止。

为了确保你触摸它是不是已经被设置为拖下时间，重置回假触摸下来。

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

Answer 2:

貌似是在这里找到一个解决我的问题：

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

这段代码检测，以便tapend后中止自来水行为touchstart后的任何举动。

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;
};

这里更多： https://developers.google.com/mobile/articles/fast_buttons

Answer 3:

我想说，当用户拖动鼠标可以看到更多的内容或角落找寻拖动元素，您可以不出有什么区别。 我想你应该改变做法。 你可以发现，如果它是一个移动设备，然后画一个开关，将启用/禁用元素的运动。

Answer 4:

为了缩短@lededge的解决方案，这可能帮助。

$("body").on("touchmove", function(){
   dragging = true;
}).on("touchend", function(){
   if (dragging)
      return;
}).on("touchstart", function(){
   dragging = false;
});

文章来源: checking if touchend comes after a drag