onClick auf untergeordnetes Element

[Martin aus Wien]

Guten Tag allerseits,

ich habe folgendes Konstrukt auf einer Seite:

  
  
<div class = "clTocNameDiv" onClick = "showHideTocInfo(1)"><label><input type="checkbox" >Kapitel 1</label></div>  
<div class="clTocInfoDiv" id="idTocInfo1">Inhaltsangabe zu Kapitel 1 bla bla bla</div>  
  

Wenn ich jetzt die Checkbox anklicke, wird auch die onClick-Funktion ausgelöst, was eine gewisse Logik hat, auch wenn ich's gern anders haben möchte.

Aber wenn ich das Label anklicke, wird wohl auch die Checkbox gecheckt, doch die onClick-Funktion wird nicht ausgelöst. Warum das? Welche Logik steckt da dahinter?

Gruß und Dank

Martin

[Gunnar Bittersmann]

@@Martin aus Wien:

nuqneH

ich habe folgendes Konstrukt auf einer Seite:
<div class = "clTocNameDiv" onClick = "showHideTocInfo(1)"><label><input type="checkbox" >Kapitel 1</label></div>

Dein Konstrukt ist kaputt. Beim Setzen der Checkbox per Tastatur passiert … – nichts.

click-Element für ein div ist ein sicheres Zeichen für eine unbenutzbare Webseite; s.a. Reinventing the hyperlink.

Registriere deinen Event-Hanler für die Checkbox! (Das Event wird dann auch gefeuert, wenn der Nutzer auf das Label clickt.)

Aber wenn ich das Label anklicke, wird wohl auch die Checkbox gecheckt, doch die onClick-Funktion wird nicht ausgelöst.

Doch, das wird sie. Sogar öfter als du denkst. Zähle mal mit.

Qapla'

[Martin aus Wien]

Könnte jemand meine Frage beantworten, bitte?

Danke

Martin

[Gunnar Bittersmann]

@@Martin aus Wien:

nuqneH

Könnte jemand meine Frage beantworten, bitte?

[x] Hab ich.

Wenn du zu irgendeinem Teil meiner Antwort eine Nachfrage hast, darfst du sie gern stellen.

Qapla'

[Martin aus Wien]

Meine Frage war: Welche Logik steckt da dahinter?

Danke

Martin

[Gunnar Bittersmann]

@@Martin aus Wien:

nuqneH

Meine Frage war: Welche Logik steckt da dahinter?

Auch das schrieb ich schon: „Registriere deinen Event-Hanler für die Checkbox! (Das Event wird dann auch gefeuert, wenn der Nutzer auf das Label clickt.)“

Clickst du auf die Checkbox, wird das Event dort gefeuert und bubblet hoch zum div.

Clickst du das Label, wird das Event dort und bei der Checkbox gefeuert und bubblet von beiden hoch zum div.

Qapla'

[dedlfix]

Tach!

Meine Frage war: Welche Logik steckt da dahinter?

Vielleicht kannst du sie dir selbst beantworten, wenn du mal das folgende Konstrukt in deinem Browser laufen lässt und dabei die Konsole der Entwicklertools anschaust. Das angezeigte event kann man durch Anklicken noch weiter untersuchen, besonders der Wert originalTarget könnte für Aufklärung sorgen. Dazu bitte auch noch Gunnars erste Antwort berücksichtigen.

<div onClick="handler(event)">  
    <label><input type="checkbox">Text</label>  
</div>  
  
<script>  
function handler(event) {  
    console.log(event);  
}  
</script>

dedlfix.