die ‚Doppelveranstaltung‘ zu vermeiden, wenn LABELS innerhalb eines Elements mit einem Klick Ereignis

Question

geklickt habe ich einige HTML-Code, der wie folgt aussieht:

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

ich jquery bin mit einem Click-Ereignis auf die LI zu befestigen, dass Ändert dann einige Klassen und aktiviert oder deaktiviert das entsprechende Kontrollkästchen.

lege ich das Click-Ereignis als solches:

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

Das funktioniert gut, wenn ich irgendwo in dem LI klicken. Wenn ich jedoch innerhalb der LI auf das LABEL klicke, wird mein click-Ereignis zweimal aufgerufen.

Warum ist das? Ich denke, es hängt mit einer Art von Ereignis zusammen, richtig?

Als solche ist die Lösung zu verwenden .triggerHandler? Ich habe etwas darüber gelesen und einige Beispiele betrachtet, aber ich verstehe die richtige Syntax für die Einrichtung nicht ganz.

NACHTRAG:

Sam eine Option darauf hingewiesen, dass ich kehrt man zu der Lösung denken. Dies ist möglicherweise kein triggerHandler-Problem.

Es scheint, dass (standardmäßig?) Das Klicken auf ein LABEL ein Klickereignis hervorbringt. Die Lösung scheint zu sein, zu überprüfen, ob das Ereignis durch das Etikett ausgelöst wurde, und wenn dies der Fall ist, überspringe es.

tun einige Tests:

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

Die oben funktioniert nicht. Ob ich auf das LABEL oder ein anderes Element klicke, es denkt, es ist nicht das Etikett.

Merkwürdig ist, dass die Logik umgekehrt tut Arbeit:

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

Jede Idee, was das ist? Ich werde mehr Tests machen ...

FINAL NACHTRAG:

Argh! Benutzerfehler Ich nahm fälschlicherweise an, dass ".nicht" das Gegenteil von ".is" tat. Nun, das ist nicht wahr. .is macht einen Vergleich und gibt einen booleschen Wert zurück. .nicht entfernt Elemente, die übereinstimmen (und daher Objekte zurückgeben).

Also, ich denke man immer für .is zu prüfen hat und ein anderes verwenden, wenn für die Prüfung ‚nicht ist‘

Answer 1

ich diese reproduzieren kann. Mindestens einer der doppelten Ereignisaufrufe scheint mit der Verwendung des Attributs für auf dem Tag zusammenzuhängen. wenn Sie die Quelle des Ereignisses (event.target) überprüfen dann sollte es

Egal, ignorieren das unerwünschte Ereignis löst die Sie erhalten:

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

Siehe http://docs.jquery.com/Events/jQuery.Event#event.type für weitere Informationen.