Comment utiliser onclick et ondblclick sur un élément?

Comme Matt, j'ai eu une expérience beaucoup meilleure lorsque j'ai augmenté légèrement la valeur de l'expiration. En outre, pour atténuer le problème du déclenchement à un seul clic deux fois (ce que je n'ai pu reproduire avec le chronomètre plus élevé de toute façon), j'ai ajouté une ligne au gestionnaire de cliquet unique:

 el.onclick = function() { if (timer) clearTimeout(timer); timer = setTimeout(function() { alert('Single'); }, 250); } 

De cette façon, si le clic est déjà activé, il s'effacera pour éviter les alertes "Single" en double.

Si vous recevez 2 alertes, il semblerait que votre seuil de détection d'un double clic soit trop faible. Essayez d'augmenter de 150 à 300 ms.

Aussi – Je ne suis pas sûr que vous êtes garanti l'ordre dans lequel clic et dblclick sont déclenchés. Ainsi, lorsque votre dblclick est décroché, il efface le premier événement de clic, mais si il se déclenche avant le deuxième événement 'clic', ce deuxième événement déclenchera lui-même seul et vous finirez avec un événement à double clic Le tir et le tir d'un coup de touche.

Je vois deux solutions possibles à ce problème potentiel:

1) Réglage d'un autre délai pour déclencher l'événement double-clic. Marquez dans votre code que l'événement à double clic est sur le point de déclencher. Ensuite, lorsque le 2ème événement «un clic» se déclenche, il peut vérifier cet état et dire "oops, dbl clic en attente, donc je ne ferai rien"

2) La deuxième option consiste à échanger vos fonctions cible en fonction des événements de clic. Cela pourrait ressembler à ceci:

 window.onload = function() { var timer; var el = document.getElementById('testButton'); var firing = false; var singleClick = function(){ alert('Single'); }; var doubleClick = function(){ alert('Double'); }; var firingFunc = singleClick; el.onclick = function() { // Detect the 2nd single click event, so we can stop it if(firing) return; firing = true; timer = setTimeout(function() { firingFunc(); // Always revert back to singleClick firing function firingFunc = singleClick; firing = false; }, 150); } el.ondblclick = function() { firingFunc = doubleClick; // Now, when the original timeout of your single click finishes, // firingFunc will be pointing to your doubleClick handler } } 

Fondamentalement, ce qui se passe ici est que vous laissez le délai d'expiration original que vous avez défini pour continuer. Il appellera toujours fesserFunc (); La seule chose qui change est ce que FiringFunc () est en train de signaler. Une fois que le double clic est détecté, il le met à doubleClick. Et puis nous revenons toujours à SingleClick une fois que le délai d'expiration expire.

Nous avons également une variable de "tir" là-bas, donc nous savons intercepter le 2ème événement de simple clic.

Une autre alternative est d'ignorer entièrement les événements dblclick, et de le détecter avec les clics simples et la minuterie:

 window.onload = function() { var timer; var el = document.getElementById('testButton'); var firing = false; var singleClick = function(){ alert('Single'); }; var doubleClick = function(){ alert('Double'); }; var firingFunc = singleClick; el.onclick = function() { // Detect the 2nd single click event, so we can set it to doubleClick if(firing){ firingFunc = doubleClick; return; } firing = true; timer = setTimeout(function() { firingFunc(); // Always revert back to singleClick firing function firingFunc = singleClick; firing = false; }, 150); } } 

Ceci n'est pas testé 🙂

Simple:

 obj.onclick=function(e){ if(obj.timerID){ clearTimeout(obj.timerID); obj.timerID=null; console.log("double") } else{ obj.timerID=setTimeout(function(){ obj.timerID=null; console.log("single") },250)} }//onclick 

Petit correctif

  if(typeof dbtimer != "undefined"){ dbclearTimeout(timer); timer = undefined; //double click }else{ dbtimer = setTimeout(function() { dbtimer = undefined; //single click }, 250); } 

 , cellclick : function(){ setTimeout(function(){ if (this.dblclickchk) return; setTimeout(function(){ click event...... },100); },500); } , celldblclick : function(){ setTimeout(function(){ this.dblclickchk = true; setTimeout(function(){ dblclick event..... },100); setTimeout(function(){ this.dblclickchk = false; },3000); },1); }