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

Question

我正在寻找添加"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 */ });