D3: Comment configurer l'événement "clic" et "dbclick" en même temps?

J'ai changé l'événement de clic sur un nœud et je veux alterner un événement dbclick à lui aussi. Cependant, cela déclenche uniquement l'événement de clic lorsque je clique dessus.

Alors, comment configurer les deux événements en même temps?

Vous devez faire votre "propre" double clic détection

Quelque chose comme ça pourrait fonctionner:

var clickedOnce = false; var timer; $("#test").bind("click", function(){ if (clickedOnce) { run_on_double_click(); } else { timer = setTimeout(function() { run_on_simple_click(parameter); }, 150); clickedOnce = true; } }); function run_on_simple_click(parameter) { alert(parameter); alert("simpleclick"); clickedOnce = false; } function run_on_double_click() { clickedOnce = false; clearTimeout(timer); alert("doubleclick"); } 

Voici un JSFiddle de travail

Pour plus d'informations sur le délai que vous devriez utiliser pour votre minuterie, regardez ici: comment utiliser onclick et ondblclick sur un élément?

 $("#test-id").bind("click dblclick", function(){alert("hello")}); 

Fonctionne à la fois pour cliquer et dblclick

MODIFIER —

Je pense qu'il n'est pas possible. J'essayais quelque chose comme ça.

 $("#test").bind({ dblclick: function(){alert("Hii")}, mousedown: function(){alert("hello")} }); 

Mais il n'est pas possible de faire un double clic sans passer par un simple clic. J'ai essayé la souris mais elle ne donne aucune solution.

Vous devez suivre le double-clic et si ce n'est pas un double clic, exécutez une action de clic. Essaye ça

 <p id="demo"></p> <button id='btn'>Click and DoubleClick</button> <script> var doubleclick =false; var clicktimeoutid = 0; var dblclicktimeoutid = 0; var clickcheck = function(e){ if(!clicktimeoutid) clicktimeoutid = setTimeout(function(){ if(!doubleclick) performclick(e); clicktimeoutid =0; },300); } var performclick =function(e){ document.getElementById("demo").innerHTML += 'click'; } var performdblclick = function(e) { doubleclick = true; document.getElementById("demo").innerHTML += 'dblclick'; dblclicktimeoutid = setTimeout(function(){doubleclick = false},800); }; document.getElementById("btn").ondblclick = performdblclick; document.getElementById("btn").onclick=clickcheck; </script> 

J'ai plutôt utilisé la même logique que Jeremy D.

Cependant, dans mon cas, il était plus propre à résoudre cette chose avec des fonctions anonymes, et un peu plus de temps de double clic:

 dblclick_timer = false .on("click", function(d) { // if double click timer is active, this click is the double click if ( dblclick_timer ) { clearTimeout(dblclick_timer) dblclick_timer = false // double click code code comes here console.log("double click fired") } // otherwise, what to do after single click (double click has timed out) else dblclick_timer = setTimeout( function(){ dblclick_timer = false // single click code code comes here console.log("single click fired") }, 250) }) 

Une approche légèrement différente – La comparaison de clique réelle se produit plus tard dans la fonction timeOut, après un intervalle préréglé … jusqu'à ce que nous maintenons simplement l'onglet sur les drapeaux.

Et avec quelques modifications simples (click-counter au lieu de drapeaux), il peut également être étendu à n'importe quel nombre de clics successifs rapides (triple clic, et autres), limité par la fonctionnalité.

 var clicked = false, dblClicked = false, clickTimer; function onClick(param){ console.log('Node clicked. param - ',param); }; function onDoubleClick(param){ console.log('Node Double clicked. param - ',param); }; function clickCheck(param){ if (!clicked){ clicked = true; clickTimer = setTimeout(function(){ if(dblClicked){ onDoubleClick(param); } else if(clicked){ onClick(param); } clicked = false; dblClicked = false; clearTimeout(clickTimer); },150); } else { dblClicked = true; } };