Quelle est la meilleure façon de gérer les événements longtap et double-tap sur les appareils mobiles en utilisant jQuery?

Il a été signalé à jQuery comme un bug, mais comme le double-tape n'est pas le même que le double-clic, il n'a pas une priorité élevée. Cependant, le maître d'œuvre Raul Sanchez a codé une solution jquery pour doubletap que vous pouvez probablement utiliser! Voici le lien , fonctionne sur le mobile Safari.

C'est facile à utiliser:

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

-modifier-

Et il y a un plugin longtap ici ! Vous pouvez voir une démo sur votre iPad ou votre iPhone ici .

La réponse de Rsplak est bonne. J'ai vérifié ce lien et ça marche bien.

Cependant, il n'exécute qu'une double fonction jQuery

J'avais besoin d'un événement doublé personnalisé auquel je pourrais lier / déléguer. c'est à dire

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

Ceci est plus important si vous écrivez une application de style backbone.js, où il y a beaucoup de liens sur l'événement.

J'ai donc pris le travail de Raul Sanchez et l'ai transformé en un «événement spécial jQuery».

Regardez ici: https://gist.github.com/1652946 Peut être utile pour quelqu'un.

Utilisez simplement une bibliothèque JavaScript multitouch comme Hammer.js . Ensuite, vous pouvez écrire un code comme:

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

Il prend en charge le robinet, le double robinet, le glissement, le maintien, la transformation (c.-à-d. Pincer) et le glisser. Les événements tactiles déclenchent également lorsque des actions de souris équivalentes se produisent, donc vous n'avez pas besoin d'écrire deux ensembles de gestionnaires d'événements. Oh, et vous avez besoin du plugin jQuery si vous voulez pouvoir écrire de la manière jQueryish comme je l'ai fait.

J'ai écrit une réponse très similaire à cette question, car elle est également très populaire mais pas très bien répondu.

Vous pouvez également utiliser jQuery Finger qui prend également en charge la délégation d'événement:

Pour longtap :

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

Pour double pression :

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

Voici une description assez fondamentale d'une fonction sur laquelle vous pouvez étendre pour le 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!'); } }); 

La longueur de temps peut être définie par le bloc if de la fonction mouseup. Cela pourrait probablement être renforcé sur une bonne affaire. J'ai un jsFiddle mis en place pour ceux qui veulent jouer avec lui.

EDIT: Je viens juste de constater que cela dépend de mousedown et mouseup été tiré avec des touches au doigt. Si ce n'est pas le cas, remplacer quelle que soit la méthode appropriée … Je ne suis pas familier avec le développement mobile.

Basé sur les derniers documents de jquery, j'ai écrit un événement double-tape

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

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