Discussion :

[mastermassi]

Bonjour,

J'ai un problème sur lequel je galère depuis ce matin:
J'ai une div et je voudrais que quand on clique dessus (mobile) ca puisse lancer une fonction et au double tap ca en lance une autre.
J'ai cherché sur le net vraiment rien trouver donc ayant craqué je viens vers vous ce soir.

Si quelqu'un déjà été confronter à ce genre de situation. Merci

[SylvainPV]

Tout le problème est de distinguer le clic du double-clic. Mettons que le clic déclenche la fonction A et le double-clic la fonction B. Alors au premier clic, le navigateur doit attendre un certain délai pour voir si un autre clic arrive et savoir s'il faut lancer A ou B. La première conséquence de ce choix est donc l'introduction d'une latence. Le second souci est que la vitesse du double-clic est un paramètre système configurable par l'utilisateur, parfois très long pour certains utilisateurs âgés ou déficients moteurs, et que ce paramètre ne peut pas être déterminé par JavaScript autrement qu'en se branchant sur l'évènement dblclick. Or, à cause de la latence par défaut, l'évènement dblclick n'est pas déclenché si un listener a intercepté le premier évènement click. Par conséquent, le seul moyen de gérer les deux évènements est d'utiliser une seule fonction C, qui selon le délai passé entre deux exécutions va appeler A ou B :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var clickTimeout = null;
var DELAI_DBL_CLICK = 300 //ms
document.querySelector("button").addEventListener("click", function(){
   if(clickTimeout != null){
      clearTimeout(clickTimeout);
      clickTimeout = null;
      B();
   } else {
      clickTimeout = setTimeout(function(){
         clickTimeout = null;
         A();
      }, DELAI_DBL_CLICK); 
   }
});

Cette approche a comme inconvénient de fixer le délai du double-clic, au lieu d'utiliser le paramètre système. Ce n'est donc pas une solution accessible.

Si on veut qu'un double-clic déclenche A puis B, sans latence donc, ce code peut suffire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var lastClickDate= 0;
var DELAI_DBL_CLICK = 300 //ms
document.querySelector("button").addEventListener("click", function(){
   var now = Date.now();
   if(now - lastClickDate > DELAI_DBL_CLICK){
     A();
   } else {
     B();
   }
   lastClickDate = now;
});

Démonstration: http://jsbin.com/sowuxobu/1/edit?html,js,output