JQuery mobile - Pour chaque événement de tap en direct, devrait-il y avoir un événement de clic équivalent?

Question

J'ai remplacé les événements de click en direct de jQuery par les événements de tap mobile de jQuery pour augmenter la réactivité.

J'ai le sentiment que c'était une mauvaise idée pour des raisons de compatibilité.

Est-il nécessaire d'avoir les deux événements, et existe-t-il un moyen de les écrire tous les deux pour la même fonction?

Comme ('click', 'tap')

Answer 1

La réponse de Billy est incroyablement complète et a en fait assez bien fonctionné les quelques fois où je l'ai utilisée. De plus, cependant, vous voudrez peut-être jeter un œil au plugin vmouse dans JQuery Mobile, il s'agit d'une tentative d'abstraction des événements de la souris :

 // Ce plugin est une expérience visant à abstraire les événements tactiles et souris
 // de sorte que les développeurs n'aient pas à se soucier de la méthode d'entrée
 // supportée par l'appareil sur lequel leur document est chargé.

-- https://github.com/jquery/jquery-mobile/blob/master/js/vmouse.js

J'ai joué avec ça sur un projet sur lequel je travaille, ça a l'air assez réactif ces jours-ci. Pour utiliser, quelque chose comme :

$('sélecteur').bind('vclick', function () { ...

ou

$('sélecteur').bind('vmousedown', function () { ...

Answer 2

Vous pouvez lier plusieurs événements en un seul appel comme ceci :

$('sélecteur').bind('clic tapez',function(){ ... })

Cela peut fonctionner correctement dans certains navigateurs/mobiles, cependant, cela peut provoquer le déclenchement des événements deux fois sur certains appareils qui déclenchent à la fois le tape et le clic.

Vous pouvez corriger cela en effectuant une sorte de détection de périphérique/fonctionnalité et en ajoutant uniquement le gestionnaire approprié de cette manière...

$('sélecteur').bind( myCustomDetectionFunction() ? 'clic' : 'tapez' ,function(){ ... })

De plus, je pense que les événements touchstart et mousedown sont de meilleurs choix. Cela est dû au fait qu'après un toucher, l'événement de clic ne se déclenche pas tant qu'un délai ne s'est écoulé, le système permettant la possibilité d'un second toucher pour en faire un double-clic ou pour qu'il devienne un geste de balayage, etc. L'événement touchstart se déclenche immédiatement, tout comme mousedown, et devrait donc être plus réactif.

Answer 3

Nous avons développé un petit script pour résoudre ce problème. Il vous suffit de l'inclure au niveau global et vos événements de clic seront déclenchés immédiatement sans aucun problème lié à l'événement retardé.

https://github.com/cargomedia/jquery.touchToClick

Answer 4

Il semble que jQuery mobile ait déjà un événement qui fait exactement cela :

$(function(){
    $('sélecteur').bind('vclick', function(e){
        alert('test');    
        return false;
    });
});

Answer 5

Vous pouvez utiliser le plug-in vmouse de jQuery. Cela résoudra le délai de 300 ms sur les événements de clic (uniquement sur mobile) ainsi que les cas où les événements de clic et de toucher sont déclenchés.

Pour obtenir uniquement le plug-in vmouse, utilisez le Générateur de téléchargement jQuery Mobile. Incluez-le après jQuery mais avant tout script qui dépendra de ce plug-in.

L'événement pertinent est vclick, l'utilisation de base est la suivante:

$(".sélecteur").on( "vclick", function( event ) {
    // À exécuter
});