如果 touchmove 触发，则取消 touchend

Question

我正在构建一些主要用于平板电脑的东西，用户可以在屏幕上点击一个项目，然后应用一个类。这是我目前所拥有的：

问题：

1. 我想使用触摸事件来删除类并在触摸端添加类（以使其更快）。
2. 如果用户滑动（触摸移动），我不希望它做任何事情。

我尝试了很多方法，但都没有奏效。我尝试过的最简单的（不成功）是这样的：

var dragging = false;

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

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

Answer 1

您可以检查事件是否可取消。 touchmove后是假的

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

Answer 2

你有拖动检查放的地方

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

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

它会在发布时重置它

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

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

或

var clickEventType = 'touchend';
if(document.ontouchstart!==null)
{
     clickEventType = 'click';
}

Answer 3

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

设置变量为假

var dragging = false;

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

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

你的按钮

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

      // your button action code
});

重置变量（重要）

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

Answer 4

您想使用以下任一：

if(dragging == true)

或者，简单地说：

if(dragging)

设置一个值时应该只使用一个=符号，而检查一个值时应该使用两个==符号。因此，您的代码应如下所示：

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

请注意，您不需要检查dragging == true，因为在这种情况下您没有运行任何代码。相反，您可以简单地检查 dragging == false 或 !dragging