使用jQuery在移动设备上处理longtap和double-tap事件的最佳方法是什么？

我正在寻找添加“doubletap”和“longtap”事件的最佳解决方案，以便与jQuery的live（），bind（）和trigger（）一起使用。 我推出了自己的快速解决方案，但这是一个小小的车。 有没有人有他们会推荐的插件，或者他们想要分享他们自己的实现？

Answer 1

据报道jQuery是一个bug，但由于doubletapping与doubleclicking不同，因此它没有高优先级。 然而，策划者Raul Sanchez编写了一个用于双击的jquery解决方案，您可以使用它！ 这是链接 ，适用于移动Safari。

它易于使用：

$('selector').doubletap(function() {}); 

-编辑-

这里有一个longtap插件！ 您可以在此处在iPad或iPhone上观看演示。

Answer 2

rsplak的答案很好。 我检查了那个链接，它确实运作良好。

但是，它只实现了一个doubletap jQuery 函数

我需要一个可以绑定/委托的自定义doubletap 事件 。 即

 $('.myelement').bind('doubletap', function(event){ //... }); 

如果你正在编写一个backbone.js样式的应用程序，那么就会发生很多事件绑定。

所以我接受了Raul Sanchez的工作，并把它变成了一个“jQuery特别活动”。

看看这里： https ： //gist.github.com/1652946可能对某人有用。

Answer 3

只需使用像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 }); 

它支持点击，双击，滑动，保持，变换（即捏合）和拖动。 当发生等效的鼠标操作时，触摸事件也会触发，因此您不需要编写两组事件处理程序。 哦，你需要jQuery插件，如果你想像我一样以jQueryish方式编写。

我为这个问题写了一个非常相似的答案，因为它也很受欢迎，但回答不是很好。

Answer 4

您还可以使用jQuery Finger ，它也支持事件委派：

对于longtap ：

 // direct event $('selector').on('press', function() { /* handle event */ }); // delegated event $('ancestor').on('press', 'selector', function() { /* handle event */ }); 

双击 ：

 // direct event $('selector').on('doubletap', function() { /* handle event */ }); // delegated event $('ancestor').on('doubletap', 'selector', function() { /* handle event */ }); 

Answer 5

这是一个非常基本的函数概述，你可以扩展为longtap：

 $('#myDiv').mousedown(function() { var d = new Date; a = d.getTime(); }); $('#myDiv').mouseup(function() { var d = new Date; b = d.getTime(); if (ba > 500) { alert('This has been a longtouch!'); } }); 

时间长度可以通过mouseup函数中的if块来定义。 这可能会在很多方面得到加强。 我为那些想玩它的人设置了一个jsFiddle 。

编辑：我刚刚意识到这取决于mousedown和mouseup用手指触摸。 如果不是这样，那么用适当的方法代替……我对移动开发并不熟悉。

Answer 6

基于最新的jquery文档我写了doubletap事件

https://gist.github.com/attenzione/7098476

Answer 7

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