Javascript 如果触发touchmove，则取消touchend

我正在构建一些主要用于平板电脑的东西，用户可以点击屏幕上的一个项目，并对其应用一个类。这就是我到目前为止所做的：

问题是：

我想使用touch事件删除该类，并在touch端添加该类（以加快速度）

如果用户点击（触摸移动），我不希望它做任何事情

我试过很多方法，但没有一种有效。我尝试过的最简单的方法（失败）是：

---

您希望使用以下任一选项：

if(dragging == true)

或者，简单地说：

if(dragging)

设置值时应仅使用一个

=

符号，而检查值时应使用两个

=

符号。因此，您的代码应该如下所示：

$('.items').on("click touchend", function(event){
    if(!dragging)
    {
        $('.items').removeClass('selected');
        $(this).addClass('selected');
    }
});

---

请注意，由于本例中没有运行任何代码，因此不需要检查拖动==true。相反，您可以简单地检查拖动==false或，

！拖动

在有拖动复选框的位置

if (dragging == true){
   dragging = false;
}

else{
$('.items').removeClass('selected');
$(this).addClass('selected');
}

它将在释放时重置它

还要注意事件的双重调用，因为它们有时会在某些平台上触发两次。最好先检查平台。以下内容将有助于检查

var clickEventType=((document.ontouchstart!==null)?'click':'touchend');

或

---

我认为这是一种更安全的方法

将变量设置为false

var dragging = false;

将var设置为true ontouchmove（允许您在应用程序中的任何地方重用此代码）

你的钮扣

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

      // your button action code
});

重置变量（重要）

---

您只需检查事件是否可取消。这是错误的

$('.items').on("click touchend", function(event){
    if (event.cancelable){
        $('.items').removeClass('selected');
        $(this).addClass('selected');
    }
});

---

if（dragging=true）

应该是

if（dragging）

，或者更好的是

if（！dragging）

，然后将else语句中的所有内容移动到if语句中（因此，您将没有其他内容）。一旦

触摸move

一次，您就可以设置

dragging=true

，这将不允许根据您的代码进行任何其他单击。事件结束后，您必须重置

dragging=false

。出于某种原因，它不允许我在触摸设备上添加“select”类，但在台式机/笔记本电脑上运行良好。这里有一个指向完整站点的链接：控制台在chrome或firefox中没有显示任何错误。

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

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

      // your button action code
});

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

$('.items').on("click touchend", function(event){
    if (event.cancelable){
        $('.items').removeClass('selected');
        $(this).addClass('selected');
    }
});