javascript - 如果 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

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

将变量设置为 false

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 2

您想使用以下任一项：

if(dragging == true)

或者，简单地说：

if(dragging)

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

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

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

Answer 3

你有拖动检查放的地方

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 4

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

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