Question

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

Answer 1

据报道jQuery是一个bug，但由于doubletapping与doubleclicking不同，因此它没有高优先级。然而，主谋Raul Sanchez编写了一个用于双击的jquery解决方案，您可以使用它！ Here's the link，适用于移动版Safari。

它易于使用：

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

-edit -

还有一个longtap插件here！您可以在iPad或iPhone here上看到演示。

Answer 2

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

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

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

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

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

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

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

Answer 3

只需使用multitouch JavaScript library like Hammer.js即可。然后你可以编写如下代码：

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // Also fires on double click
        // Generate a pony
    })
    .bind('hold', function(e) {
        // Generate a unicorn
    });

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

我给this question写了一个非常相似的答案，因为它也非常受欢迎，但答案不是很好。

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 (b-a > 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);

使用jQuery在移动设备上处理长分接头和双击事件的最佳方法是什么？

7 个答案: