evitar la 'doble acontecimiento' cuando se hace clic ETIQUETAS dentro de un elemento con un evento de clic

Question

tengo algo de HTML que tiene este aspecto:

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

estoy usando jQuery para adjuntar un evento de clic a la LI que modificará algunas clases y marcará o desmarcará la casilla dentro de.

adjunto el evento de clic como tal:

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

Esto funciona bien si hago clic en cualquier parte del LI. Sin embargo, si hago clic en la ETIQUETA dentro de LI, mi evento de clic se llama dos veces.

¿Por qué es eso? Creo que está relacionado con algún tipo de evento burbujeante, ¿correcto?

Como tal, ¿es la solución para usar .triggerHandler? He leído algo sobre él y he analizado algunos ejemplos, pero no entiendo muy bien la sintaxis adecuada para configurarlo.

Adición:

Sam señaló una opción que creo que conduce a la solución. Esto tal vez no es un problema de triggerHandler.

Lo que parece estar sucediendo es que (de forma predeterminada?) Al hacer clic en una ETIQUETA se disparará un evento de clic. La solución parece ser verificar si el evento fue activado por la etiqueta y, de ser así, anularlo.

hacer algunas pruebas:

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

Lo anterior no funciona. Si hago clic en la ETIQUETA u otro elemento, cree que es no la etiqueta.

Curiosamente, invirtiendo la lógica hace trabajo:

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

Alguna idea de lo que es? Voy a hacer más pruebas ...

ADENDA FINAL:

Argh! Error de usuario. Yo, erróneamente, asumí que 'no' hizo lo contrario de '.is'. Bueno, eso no es verdad. .is hace una comparación y devuelve un booleano. .no elimina los elementos que coinciden (y por lo tanto devuelve objetos).

Por lo tanto, supongo que siempre hay que comprobar si hay .is y usar una cosa cuando las pruebas de 'no es'

Answer 1

puedo reproducir este. Al menos una de las llamadas a eventos duplicados parece estar relacionada con el uso del atributo para en la etiqueta.

En cualquier caso, si se activa la fuente del evento (event.target) entonces se debe pasar por alto el evento no deseado disparadores que está recibiendo:

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

Ver http://docs.jquery.com/Events/jQuery.Event#event.type para obtener más información.