javascript 检查 touchend 是否在拖动后出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12690620/
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
checking if touchend comes after a drag
提问by Konrad Lawson
I have some code which changes the class of a table. On a phone, sometimes the table will be too wide for the screen and the user will drag/scroll about to see the contents. However, when they touch and drag the table around, it triggers touchend on every drag.
我有一些代码可以更改表的类。在手机上，有时表格对于屏幕来说太宽了，用户会拖动/滚动来查看内容。但是，当他们触摸并拖动桌子时，它会在每次拖动时触发 touchend。
How do I test to see whether the touchend came as a result of a touch-drag? I tried tracking dragstart and dragend but I couldn't get that to work and it seems an inelegant approach. Is there something I could add to below which would essentially determine, "Did this touchend come at the end of a drag?"
我如何测试以查看 touchend 是否由于触摸拖动而出现？我尝试跟踪 dragstart 和 dragend 但我无法让它工作，这似乎是一种不雅的方法。是否有什么我可以添加到下面基本上可以确定，“这个触摸端是否在拖动结束时出现？”
$("#resultTable").on("touchend","#resultTable td",function(){
$(this).toggleClass('stay');
});
My thanks in advance for your help.
在此先感谢您的帮助。
PS - using latest jquery, and while a regular click works, it is very slow in comparison to touchend.
PS - 使用最新的 jquery，虽然常规点击有效，但与 touchend 相比非常慢。
回答by lededje
Use two listeners:
使用两个监听器：
First set a variable to false:
首先设置一个变量为false：
var dragging = false;
Then ontouchmove set dragging to true
然后ontouchmove设置拖动为true
$("body").on("touchmove", function(){
dragging = true;
});
Then on drag complete, check to see if dragging is true, and if so count it as a dragged touch:
然后在拖动完成后，检查拖动是否正确，如果是，则将其视为拖动触摸：
$("body").on("touchend", function(){
if (dragging)
return;
// wasn't a drag, just a tap
// more code here
});
The touch end will still fire, but will terminate itself before your tap script is run.
触摸端仍会触发，但会在您的点击脚本运行之前自行终止。
To ensure the next time you touch it isn't already set as dragged, reset it back to false on touch down.
为确保下次触摸时尚未将其设置为已拖动，请在触摸时将其重置为 false。
$("body").on("touchstart", function(){
dragging = false;
});
回答by Konrad Lawson
Looks like one solution to my problem is found here:
看起来我的问题的一种解决方案可以在这里找到：
http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript/
http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript/
This bit of code detects any move after touchstart in order to abort tap behavior after tapend.
这段代码检测 touchstart 后的任何移动，以便在 tapend 后中止点击行为。
var tapArea, moved, startX, startY;
tapArea = document.querySelector('#list'); //element to delegate
moved = false; //flags if the finger has moved
startX = 0; //starting x coordinate
startY = 0; //starting y coordinate
//touchstart
tapArea.ontouchstart = function(e) {
moved = false;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
};
//touchmove
tapArea.ontouchmove = function(e) {
//if finger moves more than 10px flag to cancel
//code.google.com/mobile/articles/fast_buttons.html
if (Math.abs(e.touches[0].clientX - startX) > 10 ||
Math.abs(e.touches[0].clientY - startY) > 10) {
moved = true;
}
};
//touchend
tapArea.ontouchend = function(e) {
e.preventDefault();
//get element from touch point
var element = e.changedTouches[0].target;
//if the element is a text node, get its parent.
if (element.nodeType === 3) {
element = element.parentNode;
}
if (!moved) {
//check for the element type you want to capture
if (element.tagName.toLowerCase() === 'label') {
alert('tap');
}
}
};
//don't forget about touchcancel!
tapArea.ontouchcancel = function(e) {
//reset variables
moved = false;
startX = 0;
startY = 0;
};
More here: https://developers.google.com/mobile/articles/fast_buttons
更多信息：https: //developers.google.com/mobile/articles/fast_buttons
回答by KoU_warch
I would say you can't tell the difference when the user drags to see more content or drag the element arround. I think you should change the approach. You could detect if it's a mobile device and then draw a switch that will enable/disable the movement of the element.
我会说当用户拖动以查看更多内容或拖动元素周围时，您无法分辨出区别。我认为你应该改变方法。您可以检测它是否是移动设备，然后绘制一个开关来启用/禁用元素的移动。
回答by Jessiemar Pedrosa
To shorten the solution of @lededge, this might help.
为了缩短@lededge 的解决方案，这可能会有所帮助。
$("body").on("touchmove", function(){
dragging = true;
}).on("touchend", function(){
if (dragging)
return;
}).on("touchstart", function(){
dragging = false;
});
