javascript 如果 touchmove 触发，则取消 touchend
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16205553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cancel touchend if touchmove fires
提问by EmmaGamma
I'm building something mainly for use on tablets, where the user can tap an item on the screen and a class is applied to it. This is what I have so far:
我正在构建一些主要用于平板电脑的东西，用户可以在其中点击屏幕上的项目并对其应用一个类。这是我到目前为止：
The problems:
问题：
- I want to use touch events to remove the class and add the class on touch end (to make it faster).
- I don't want it to do anything if the user swipes (touchmoves).
- 我想使用触摸事件来删除类并在触摸端添加类（以使其更快）。
- 如果用户滑动（触摸移动），我不希望它做任何事情。
I've tried a number of things, none of which have worked. The simplest I've tried (unsuccessfully) is this:
我尝试了很多东西，但没有一个奏效。我尝试过的最简单的（不成功）是这样的：
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');
}
});
回答by Jonathan
I would argue this is a more safe way of doing it
我认为这是一种更安全的方法
Setting variable to false
将变量设置为 false
var dragging = false;
Setting var to true ontouchmove (allows you to reuse this code everywhere in your app)
将 var 设置为 true ontouchmove（允许您在应用程序的任何地方重用此代码）
$("body").on("touchmove", function(){
dragging = true;
});
Your button
你的按钮
$("#button").on("touchend", function(){
if (dragging)
return;
// your button action code
});
Resetting variable (important)
重置变量（重要）
$("body").on("touchstart", function(){
dragging = false;
});
回答by What have you tried
You want to use either of the following:
您想使用以下任一项：
if(dragging == true)
Or, simply:
或者，简单地说：
if(dragging)
You should only use a single =sign when you are settinga value, whereas two ==signs should be used when checkinga value. Therefore, your code should look like:
设置值=时只应使用单个符号，而检查值时应使用两个符号。因此，您的代码应如下所示：==
$('.items').on("click touchend", function(event){
if(!dragging)
{
$('.items').removeClass('selected');
$(this).addClass('selected');
}
});
Notice how you do not need to check if dragging == truebecause you are not running any code in this case. Instead you can simply check if dragging == falseor, !dragging
请注意，您无需检查是否，dragging == true因为在这种情况下您没有运行任何代码。相反，您可以简单地检查是否dragging == false或，!dragging
回答by Derry White
where you have dragging check put
你有拖动检查放的地方
if (dragging == true){
dragging = false;
}
else{
$('.items').removeClass('selected');
$(this).addClass('selected');
}
it will reset it on release
它会在发布时重置它
also watch out for double calls on events as they sometimes trigger twice on some platforms best to check platform with first the following will help with checks
还要注意对事件的双重调用，因为它们有时会在某些平台上触发两次，最好先检查平台，以下将有助于检查
var clickEventType=((document.ontouchstart!==null)?'click':'touchend');
or
或者
var clickEventType = 'touchend';
if(document.ontouchstart!==null)
{
clickEventType = 'click';
}
