检查touchend是否在拖动后出现 [英] checking if touchend comes after a drag

问题描述

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

I have some code which changes the class of a table. On a phone, sometimes the table will be too wide for the screen and the user will drag/scroll about to see the contents. However, when they touch and drag the table around, it triggers touchend on every drag.

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

How do I test to see whether the touchend came as a result of a touch-drag? I tried tracking dragstart and dragend but I couldn't get that to work and it seems an inelegant approach. Is there something I could add to below which would essentially determine, "Did this touchend come at the end of a drag?"

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

我提前感谢您的帮助。

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

PS - using latest jquery, and while a regular click works, it is very slow in comparison to touchend.

推荐答案

使用两个听众：

首先将变量设置为false：

Use two listeners:

First set a variable to false:

var dragging = false;

然后ontouchmove set dragging to true

Then ontouchmove set dragging to true

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

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

Then on drag complete, check to see if dragging is true, and if so count it as a dragged touch:

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

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

触摸端仍将触发，但会在您运行点击脚本之前自行终止。

The touch end will still fire, but will terminate itself before your tap script is run.

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

To ensure the next time you touch it isn't already set as dragged, reset it back to false on touch down.

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

这篇关于检查touchend是否在拖动后出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！