onclick event in geschachteleten elementen

[Matthias]

tach

ich hab ein problem, zudem wahrscheinlich schon irgendwo eine lösung steht, hab aber noch nix gefunden, deshalb hier die frage:

ich habe zwei geschachtelte elemente mit jeweils einem onclick event. beim click auf das innere element wird zuerst der passende onclick ausgeführt, danach aber noch der vom darunterliegenden element. gibt es einen weg das zu vermeiden. hier der testcode:

<div onclick="alert('1')">Text 1
 <div onclick="alert('2')">Text 2
 </div>
</div>

ausgabe bei click auf text2: 2 und dann 1

danke für einen tipp

gruss matthias

[molily]

Hallo,

ich habe zwei geschachtelte elemente mit jeweils einem onclick event. beim click auf das innere element wird zuerst der passende onclick ausgeführt, danach aber noch der vom darunterliegenden element. gibt es einen weg das zu vermeiden. hier der testcode:

<div onclick="alert('1')">Text 1
<div onclick="alert('2')">Text 2
</div>
</div>

Click-Events steigen im Elementbaum auf (Bubbling). Dieses Bubbling kannst du so verhindern:

event.cancelBubble = true; // Internet Explorer  
if (event.stopPropagation) // W3C DOM Events  
   event.stopPropagation();

Über »event« kannst du in allen Browser in einem Event-Handler-Attribut wie onclick="..." auf das Ereignisobjekt zugreifen.
In einer gesonderten Handler-Funktion, die mit JavaScript selbst registriert wurde (element.onclick = handler;),  musst du hingegen erst einmal den Zugriff auf das Ereignisobjekt vereinheitlichen, siehe http://de.selfhtml.org/javascript/objekte/event.htm#allgemeines.

Mathias