Question

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

问题：

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

我尝试过很多东西，其中没有一个有效。我尝试过的最简单的（失败的）就是：

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');
    }
});

如果touchmove fires，取消touchend

4 个答案: