Écouter double-cliquez pas sur

Je me demandais simplement pourquoi click événement qui se passe quand je dbclick un élément?

J'ai ce code:(JSBIN)

HTML

<p id="hello">Hello World</p>

JavaScript

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
}, false);
document.getElementById('hello').addEventListener('dbclick', function(){
  this.style.background = 'yellow';
}, false);

Il doit faire des choses différentes pour cliquer et double-cliquer, mais il semble que lorsque vous double-cliquez sur le p attraper click événement à l'avance et d'ignorer double-cliquez.

J'ai essayé preventDefault la click événement.
Comment puis-je écouter juste dbclick?

Mise à JOUR

J'ai eu une faute de frappe dans mon code. dbclick est faux. C'est dblclick. De toute façon le problème existe toujours. Lorsque l'utilisateur double-clique sur le click événement se produit.

C'est la mise à jour du code qui le prouvent:(JSBin)

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
  this.innerText = "Hello World clicked";
}, false);
document.getElementById('hello').addEventListener('dblclick', function(){
  this.style.background = 'green';
}, false);
  • Tu veux dire dblclick, sans doute.
  • Cette question faite à cause d'une faute de frappe. Je souhaite que je pourrais le supprimer!
  • Pourquoi?! Il y a quelques autres points importants soulevés dans les réponses. S'il vous plaît ne pas ignorer les conseils donnés juste parce que vous avez fait une faute de frappe. À la question "Comment puis-je écouter de la juste dblclick" n'est pas résolu par la fixation de votre faute de frappe.
  • vous avez raison! J'ai mis à jour la question.
  • pensez-vous stopPropagation serait de l'aide ici?
  • Nope. (Faire quoi que ce soit dans le click événement ne peut pas changer ce qui se passe selon que dblclick va arriver plus tard, à court d'invoquer un magique voyage dans le temps de la fonction.) Ma réponse est complète. Désolé.

InformationsquelleAutor Mohsen | 2011-10-26
  1. 16

    dblclick n'est pas magique: si la seconde rapide click les feux de la dblclick événement, le premier click a déjà déclenché de son propre gestionnaire d'événement.

    Vous doit à peu près jamais définir à la fois un click et un dblclick événement sur un élément du DOM; lorsque vous le faites, vous aurez besoin de fantaisie avec des minuteries pour atténuer le problème.

    Dans ce scénario, vous aurez également besoin de réparer votre faute de frappe (s/dbclick/dblclick/) pour obtenir de l'événement à feu à tous.

    notez Également que double ne fait pas partie de la spécification DOM à tous (pas présent dans DOM Niveau 2 1.6.2). Pour cette raison, il est connu comme un "DOM Niveau 0" fonctionnalité.

    • Je n'ai eu aucun problème en utilisant à la fois avec certains cas simples, par exemple, un simple clic signifie que l'utilisateur a sélectionné un élément dans une liste, donc peut-être afficher plus d'informations à propos de cet élément et/ou d'activer un bouton associé, tandis que le double clic signifie l'auto-cliquez sur le bouton associé.
    • Dans ce scénario, peut-être double-sélection a été transparente pour l'utilisateur. La même chose serait probablement vrai pour l'OP du scénario, mais c'est pas de règle générale.
    • +1, et d'aller à la JSBIN et de fixation de la dbclick être dblclick c'est exactement ce que j'attends: vire au rouge de l'événement click puis jaune à partir de l'événement dblclick.
    InformationsquelleAutor Lightness Races with Monica
  2. 9

    Changement 'dbclick' à 'dblclick'.

    InformationsquelleAutor Josh
  3. 2

    Utilisation dblclick au lieu de dbclick.

    InformationsquelleAutor michaeljdennis
  4. 1

    Cela fonctionne pour moi (à l'aide de la d3 de la bibliothèque, mais d pourrait également être un objet dictionary):

    function log(s){try{console.log(s)}catch(e){}} //for debugging

var click_d = null

function click(d){
    log("click")
    click_d = d
    setTimeout(click_action, 200)
}

function click_action(){
    log("click_action")
    if(click_d == null){
        log("aborted")
        return
    }
    d = click_d

    //do things with d
}

function doubleclick(d){
    log("dblclick")
    click_d = null

    //do things with d
}
    InformationsquelleAutor Cees Timmerman
  5. 0

    Pour répondre à la version révisée de la question (Comment mutuellement exclusivement poignée de clic et double clic), vous devez retarder l'événement click jusqu'à dblclick n'est plus possible. Ce qui donne un léger décalage (par exemple, 500ms) cliquer sur la manutention, mais sinon il n'y a aucun moyen pour le DOM de prédire si un deuxième clic arrivée.

    Un exemple de script est dans cette réponse: https://stackoverflow.com/a/11057483/43217

    InformationsquelleAutor mckamey
  6. -3

    Je suppose que vous travaillez sur ordinateur lent. Sur un ordinateur lent double-cliquez pourraient être interprétés comme deux seul clic avec beaucoup de temps dans entre. Vous pouvez expérimenter avec la souris paramètre et modifier le double cliquez sur paramètre. Qui devrait résoudre le problème. Si vous êtes ordinateur est très vite et n'a pas de lag problème, votre problème pourrait être ailleurs. Il est très peu probable que le double clic peut être pris comme un seul clic comme bogue de code (celui que vous avez posté). Le problème pourrait être d'ailleurs pas si la lenteur de l'ordinateur.

    • -1: le temps d'Exécution n'est pas particulièrement pertinente, autre que celui qu'elle existe; vous aurez toujours au moins la première click événement. Un downvote ici peut être un peu dur, mais je pense qu'il peut sans doute être considérée comme l'OP sait ce qu'est un double cliquez sur se sent comme sur son ordinateur.
    InformationsquelleAutor Hammad Khan