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

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()一起使用。我推出了自己的快速解决方案,但这是一个小小的车。有没有人有他们会推荐的插件,或者他们想要分享他们自己的实现?

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,但由于doubletapping与doubleclicking不同,因此它没有高优先级。然而,主谋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.

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

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

只需使用像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插件,如果你想像我一样以jQueryish方式编写。

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:

// 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块来定义。这可能会在很多方面得到加强。我为那些想玩它的人设置了一个jsFiddle。

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.

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

#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