使用jQuery在移动设备上处理longtap和双击事件的最佳方式是什么?

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()和触发器()一起使用。我推出了我自己的快速解决方案，但有点麻烦。有没有人有他们推荐的插件，或者他们自己想要分享的插件?

7 个解决方案

#1

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报告说这是一个bug，但由于双写与双写并不相同，所以它没有很高的优先级。然而，mastermind Raul Sanchez编写了一个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.

这里有一个longtap插件!你可以在iPad或iPhone上看到一个演示。

#2

rsplak's answer is good. I checked out that link and it does work well.

rsplak的回答是好的。我检查了那个链接，它运行得很好。

However, it only implements a doubletap jQuery function

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

I needed a custom doubletap event that I could bind/delegate to. i.e.

我需要一个可以绑定/委托给的自定义双重轻击事件。即。

$('.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.

如果你在写主干，这一点就更重要了。js风格的应用，有很多事件绑定。

So I took Raul Sanchez's work, and turned it into a "jQuery special event".

所以我把劳尔·桑切斯的作品变成了“jQuery特辑”。

Have a look here: https://gist.github.com/1652946 Might be useful to someone.

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

#3

Just use a multitouch JavaScript library like Hammer.js. Then you can write code like:

只需使用多触摸JavaScript库，比如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
    });

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.

它支持点击，双击，滑动，保持，转换(即。、压力)和阻力。当发生等效的鼠标操作时，触摸事件也会触发，因此不需要编写两组事件处理程序。哦，如果你想像我一样用jQueryish的方式编写，你需要jQuery插件。

I wrote a very similar answer to this question because it's also very popular but not very well answered.

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

#4

You can also use jQuery Finger which also supports event delegation:

您也可以使用jQuery Finger，支持事件委托:

For longtap:

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 */ });

#5

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 if block in the mouseup function. This probably could be beefed up upon a good deal. I have a jsFiddle set up for those who want to play with it.

时间的长度可以由mouseup函数中的if块来定义。这很可能会得到大量的支持。我为那些想玩它的人准备了一个小提琴。

EDIT: I just realized that this depends on mousedown and mouseup being 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.

编辑:我刚刚意识到这取决于鼠标滚落和鼠标滚开时用手指触摸。如果不是这样，那么用适当的方法替代……我对移动开发不是很熟悉。

#6

based on latest jquery docs i've written doubletap event

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

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

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

#1