Question

我有一些代码可以更改表的类。在手机上，有时桌子对于屏幕来说太宽，用户将拖动/滚动以查看内容。然而，当他们触摸并拖动桌子时，它会在每次拖动时触发touchend。

如何测试touchend是否因触摸拖动而出现？我尝试跟踪dragstart和dragend但我无法让它工作，这似乎是一种不优雅的方法。有什么我可以添加到下面的内容基本上可以确定，“这个touchend是否在拖拽结束时出现了？”

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

我提前感谢您的帮助。

PS - 使用最新的jquery，虽然定期点击有效，但与touchend相比，速度非常慢。

Answer 1

使用两个侦听器：

首先将变量设置为false：

var dragging = false;

然后ontouchmove设置拖动到true

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

然后在拖动完成时，检查拖动是否为真，如果是，则将其视为拖动触摸：

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

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

触控端仍然会触发，但会在点按脚本运行之前自行终止。

为确保您下次触摸时未将其设置为已拖动，请在触摸时将其重置为false。

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

Answer 2

在这里看到我的问题的一个解决方案：

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

这段代码检测touchstart之后的任何移动，以便在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;
};

更多信息： https://developers.google.com/mobile/articles/fast_buttons

Answer 3

我想说当用户拖动以查看更多内容或拖动元素时，你无法区分。我认为你应该改变方法。您可以检测它是否是移动设备，然后绘制一个启用/禁用元素移动的开关。

Answer 4

要缩短@lededge的解决方案，这可能会有所帮助。

function sendData(questionsArr) {
  fetch('/some-endpoint', {
    method: 'post',
    body: JSON.stringify(questionsArr)
  }).then(response => {
    return response.json();
  }).then(data => {
    // response
    console.log(data)
  });
}

检查touchend是否在拖动后出现

4 个答案:

使用两个侦听器：