doppelter Event handeln

[molily]

Hallo,

click-Events steigen auf (»bubblen«) und lösen alle onclick-Handler bei Elternelementen aus. Klickt man auf einen Button, wird der click-Handler dieses Buttons (input- oder button-Element) ausgelöst, dann der Handler des Elternelements, dann der Handler dessen Elternelements usw.

Wenn du den click-Event bei tr behandelst, dann machst du dir das Aufsteigen des Events (Bubbling) im Element-Baum immer zunutze. Denn das sogenannte Zielelement (target) - das ist das Element, bei dem der Event ursprünglich ausgelöst wurde - ist nie tr, sondern td oder weitere Elemente in diesen Zellen.

Bei einem Klick auf einen Button unterhalb von tr willst du nun, dass der click-Handler beim tr abgebrochen wird - denn der Event wurde bereits direkt am Button behandelt. Vom Schema:

<tr><td>Text <button>Button</button> Text</td></tr>

Im click-Handler bei tr fragst du nun ob, woher der Event kommt - das heißt, welches Element das Ziel des Events ist. Wenn der Event beim button-Element gestartet ist und von dort aus aufgestiegen ist, dann kannst du die Event-Behandlung abbrechen.

  
function tr_click_handler (e) {  
  e = e || window.event;  
  // Bringe Zielelement in Erfahrung  
  var target = e.target || e.srcElement; // Kurzversion von [link:http://www.quirksmode.org/js/events_properties.html#target]  
  // Das Zielelement ist jetzt in target gespeichert, frage den nodeName ab (in dem Fall ist das der Tag-Name des Elementknotens)  
  if (target.nodeName == "button") {  
    // Wenn Button geklickt wurde, breche ab  
    return false;  
  }  
  // Mache ansonsten das, was nötig ist  
  // ...  
}

Mathias