doppelter Event handeln

[nicolas]

situation:
ich habe auf einem tr einen onclick. in diesem tr habe ich ein icon welches ebenfalls einen onclick event aufruft. ich gebe diesen beiden eine id mit, also für den tr '1' und für das icon '2'. Wenn ich jetzt das icon anklicke, dann wird diese id zweimal übergeben, da die onlicks sich überlagern. mit einem switch frage ich ab (anhand der id), welcher case ausgeführt werden soll. da die id bei einem klick zweimal übergeben wird wird auch die funktion mit dem switch zweimal ausgeführt.
problem:
wie kann ich jetzt den tr-onclick event filtern im falle wenn das icon angeklickt wird? jemand damit erfahrungen?

danke,
nicolas

[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

[Cybaer]

Hi,

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.

Warum nicht das Blubbern *einfach* mit stopPropagation() bzw. cancelBubble unterbinden? Dann kommt der Event des Buttons doch gar nicht mehr beim Elternelement an. Deine Lösung scheint mir, bei aller Morgenmüdigkeit, eher wie quer durch die Brust ins Auge ... ;-)

Gruß, Cybaer