éviter la « double événement » lorsque LABELS sont cliqués dans un élément avec un événement click

Question

J'ai du code HTML qui ressemble à ceci:

<ul class="toggleList"> 
     <li><input type="checkbox" name="toggleCbx1" id="toggleCbx1" /><label for="toggleCbx1">Item 1</label></li> 
</ul> 

J'utilise jquery de joindre un événement de clic au LI que va alors modifier certaines classes et cocher ou décocher la case à cocher.

Je joins l'événement click comme tel:

$("ul.toggleList li").click(function(){toggleStuff($(this));}) 

Cela fonctionne bien si je clique partout dans le LI. Cependant, si je clique sur l'étiquette dans le LI, mon événement de clic est appelé deux fois.

Pourquoi est-ce? Je pense que c'est lié à une sorte d'événement, n'est-ce pas?

En tant que tel, est la solution à utiliser .triggerHandler? J'ai fait quelques lectures et j'ai regardé quelques exemples, mais je ne comprends pas très bien la syntaxe appropriée pour la mise en place.

ADDENDA:

Sam signale une option que je pense conduit à la solution. Ce n'est peut-être pas un problème de triggerHandler. Ce qui semble se produire est que (par défaut?) Cliquer sur un LABEL fera apparaître un événement click. La solution semble être de vérifier si l'événement a été déclenché par l'étiquette et, dans l'affirmative, de le surpasser.

Faire des tests:

[...].click(function(evt){ 
     console.log(evt.target); 
     if ($(evt.target).not("label")) { 
      console.log("not label?"); 
      doMyThing($(this)); 
     }else{ 
      console.log("is label?"); 
     }; 

La précède ne fonctionne pas. Que je clique sur l'étiquette ou un autre élément, il pense que c'est pas l'étiquette.

Bizarrement, en inversant la logique ne travail:

[...].click(function(evt){ 
     console.log(evt.target); 
     if ($(evt.target).is("label")) { 
      console.log("is label?"); 
     }else{ 
      console.log("not label?"); 
      doMyThing($(this)); 
     }; 

Toute idée de ce qui est? Je vais faire plus d'essais ...

ADDENDA FINAL:

Argh! Erreur de l'utilisateur J'ai, à tort, supposé que '.not' ne faisait pas le contraire de '.is'. Eh bien, ce n'est pas vrai. .is fait une comparaison et renvoie un booléen. .not supprime les éléments qui correspondent (et renvoie donc les objets).

Donc, je suppose que l'on a toujours vérifier .est et utiliser un autre lors du test pour « non est »

Answer 1

je peux reproduire ce. Au moins un des appels d'événement en double semble être lié à l'utilisation de l'attribut pour sur l'étiquette.

Peu importe, si vous cochez la source de l'événement (event.target), alors il devrait ignorer l'événement indésirable que vous recevez des déclencheurs:

$("ul.toggleList li").click(function (evt) { 
     if ($(evt.target).is("li")) { 
      toggleStuff($(this)); 
     } 
    } 
); 

Voir http://docs.jquery.com/Events/jQuery.Event#event.type pour plus d'informations.