Javascript 使用 jQuery 在移动设备上处理长按和双击事件的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5507638/
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
What's the best way to handle longtap and double-tap events on mobile devices using jQuery?
提问by Luke Dennis
I'm looking for the best solution to adding both "doubletap" and "longtap" events for use with jQuery's live(), bind() and trigger(). I rolled my own quick solution, but it's a little buggy. Does anyone have plugins they would recommend, or implentations of their own they'd like to share?
我正在寻找添加“doubletap”和“longtap”事件的最佳解决方案，以便与 jQuery 的 live()、bind() 和 trigger() 一起使用。我推出了我自己的快速解决方案，但它有点问题。有没有人有他们会推荐的插件，或者他们想要分享的他们自己的实现？
采纳答案by rsplak
It has been reported to jQuery as a bug, but as doubletapping isn't the same as doubleclicking, it does not have a high priority. However, mastermind Raul Sanchez coded a jquery solution for doubletap which you can probably use! Here's the link, works on mobile Safari.
它已作为错误报告给 jQuery，但由于双击与双击不同，因此它的优先级不高。但是，策划者 Raul Sanchez 为 doubletap 编写了一个 jquery 解决方案，您可能可以使用它！ 这是链接，适用于移动 Safari。
It's easy to use:
它易于使用：
$('selector').doubletap(function() {});
-edit-
-编辑-
And there's a longtap plugin here! You can see a demo on your iPad or iPhone here.
回答by asgeo1
rsplak's answer is good. I checked out that link and it does work well.
rsplak 的回答很好。我检查了那个链接，它运行良好。
However, it only implements a doubletap jQuery function
但是，它只实现了双击 jQuery功能
I needed a custom doubletap eventthat I could bind/delegate to. i.e.
我需要一个可以绑定/委托的自定义双击事件。IE
$('.myelement').bind('doubletap', function(event){
//...
});
This is more important if you're writing a backbone.js style app, where there is a lot of event binding going on.
如果您正在编写一个backbone.js 风格的应用程序，其中有很多事件绑定正在进行，那么这一点更为重要。
So I took Raul Sanchez's work, and turned it into a "jQuery special event".
所以我拿了 Raul Sanchez 的作品，把它变成了“jQuery 特别活动”。
Have a look here: https://gist.github.com/1652946Might be useful to someone.
看看这里：https: //gist.github.com/1652946可能对某人有用。
回答by David Johnstone
Just use a multitouch JavaScript library like Hammer.js. Then you can write code like:
只需使用像 Hammer.js 这样的多点触控 JavaScript 库。然后你可以编写如下代码：
canvas
.hammer({prevent_default: true})
.bind('doubletap', function(e) { // Also fires on double click
// Generate a pony
})
.bind('hold', function(e) {
// Generate a unicorn
});
It supports tap, double tap, swipe, hold, transform (i.e., pinch) and drag. The touch events also fire when equivalent mouse actions happen, so you don't need to write two sets of event handlers. Oh, and you need the jQuery plugin if you want to be able to write in the jQueryish way as I did.
它支持点击、双击、滑动、按住、变换（即捏合）和拖动。当发生等效的鼠标操作时，也会触发触摸事件，因此您无需编写两组事件处理程序。哦，如果您想像我一样以 jQuery 风格编写代码，则需要 jQuery 插件。
I wrote a very similar answer to this questionbecause it's also very popular but not very well answered.
我对这个问题写了一个非常相似的答案，因为它也很受欢迎但不是很好回答。
回答by ngryman
You can also use jQuery Fingerwhich also supports event delegation:
您还可以使用jQuery Finger，它也支持事件委托：
For longtap:
对于长按：
// direct event
$('selector').on('press', function() { /* handle event */ });
// delegated event
$('ancestor').on('press', 'selector', function() { /* handle event */ });
For double tap:
对于双击：
// direct event
$('selector').on('doubletap', function() { /* handle event */ });
// delegated event
$('ancestor').on('doubletap', 'selector', function() { /* handle event */ });
回答by eykanal
Here's a pretty basic outline of a function you can extend upon for the longtap:
这是您可以为 longtap 扩展的函数的一个非常基本的概述：
$('#myDiv').mousedown(function() {
var d = new Date;
a = d.getTime();
});
$('#myDiv').mouseup(function() {
var d = new Date;
b = d.getTime();
if (b-a > 500) {
alert('This has been a longtouch!');
}
});
The length of time can be defined by the ifblock in the mouseup function. This probably could be beefed up upon a good deal. I have a jsFiddleset up for those who want to play with it.
时间长度可以由ifmouseup 函数中的块定义。这可能会得到加强。我为那些想玩它的人设置了一个jsFiddle。
EDIT: I just realized that this depends on mousedownand mouseupbeing fired with finger touches. If that isn't the case, then substitute whatever the appropriate method is... I'm not that familiar with mobile development.
编辑：我刚刚意识到这取决于mousedown并mouseup用手指触摸被解雇。如果情况并非如此，那么请替换任何适当的方法......我对移动开发不太熟悉。
回答by Attenzione
based on latest jquery docs i've written doubletap event
基于最新的 jquery 文档，我编写了 doubletap 事件
回答by tdjprog
function itemTapEvent(event) {
if (event.type == 'touchend') {
var lastTouch = $(this).data('lastTouch') || {lastTime: 0},
now = event.timeStamp,
delta = now - lastTouch.lastTime;
if ( delta > 20 && delta < 250 ) {
if (lastTouch.timerEv)
clearTimeout(lastTouch.timerEv);
return;
} else
$(this).data('lastTouch', {lastTime: now});
$(this).data('lastTouch')['timerEv'] = setTimeout(function() {
$(this).trigger('touchend');
}, 250);
}
}
$('selector').bind('touchend', itemTapEvent);
