Unterschied window.onclick vs. window.addEventListener()

[Gunnar Bittersmann]

@@alle:

window.onclick = showNodeName;  
  
function showNodeName(e)  
{  
  if (!e) var e = window.event;  
  var target = e.target || e.srcElement;  
  if (target.nodeType == 3) target = target.parentNode; // defeat Safari bug  
  
  alert(target.nodeName);  
  return false;  
}

tut das Erwartete: Es wird der Elementtyp der jeweiligen Box, auf die geclickt wurde, ausgegeben. Beim Click auf einen Link wird "A" ausgegeben, dem Link wird nicht gefolgt (return false;).

Tauscht man nun
  window.onclick = showNodeName;
gegen
  window.addEventListener("click", showNodeName, false);
wird hingegen beim Click auf einen Link nach Schließen des Dialogfensters dem Link gefolgt (Firefox 3).

Warum ist das so? Wie ließe sich das verhindern?

Live long and prosper,
Gunnar

PS: Für welche Safaris ist
  if (targ.nodeType == 3) target = target.parentNode;
vonnöten? Braucht man das heutzutage noch?

[Tom123]

Hi Gunnar,

wie der Name "addEventListener" sagt, wird hier nicht der Event definiert, sondern eine Aktion die zusätzlich zum Event aufgeführt wird.

Grüße
Tom123

[Beat]

Wie ließe sich das verhindern?

Indem du keinen Link verwendest (auf ein href Attribut verzichtest, oder es zur geeigneten Sekunde eliminierst).
So zumindest meine sehr rudimentäre Vorstellung vom Sinn und Zweck eines <a> Elements.

Ansonsten, hast du es schon mit cancel bubble in der referenzierten function versucht?
https://developer.mozilla.org/En/DOM/Event.cancelBubble

mfg Beat

[ChrisB]

Hi,

Tauscht man nun
  window.onclick = showNodeName;
gegen
  window.addEventListener("click", showNodeName, false);
wird hingegen beim Click auf einen Link nach Schließen des Dialogfensters dem Link gefolgt (Firefox 3).

Warum ist das so? Wie ließe sich das verhindern?

Ueber Aufruf von event.preventDefault vielleicht?

MfG ChrisB

[Christian S.]

Hi,

Warum ist das so? Wie ließe sich das verhindern?

Wieso das so ist, kann ich dir leider nicht sagen. Auf jeden Fall ist es aber so, dass return false eben bei addEventListener (und auch bei der IE Version attachEvent) nichts bewirkt.

Wie schon erwähnt musst du dann einfach e.preventDefault(); aufrufen (statt return false).

Die IE version lautete:
e.returnValue = false;

also etwa so:

if (e.preventDefault)
   e.preventDefault();
e.returnValue = false;

dann kannst du es auch mit attachEvent anhängen für den IE. Der Event Objekt e wird in beiden Fällen übergeben, so dass du die if (!e) Abfrage gar nicht mehr brauchst.

Gruß!

[molily]

Ich würde es ja sonst selten verlinken, aber dir kann ich es sicher »zumuten« und du kannst daran schnell lernen:
DOM 2 Events
DOM 3 Events

Ansonsten natürlich auch
http://redaktion.selfhtml.org/selfhtml-preview/javascript/einbindung.html#standardaktion ff.

Für welche Safaris ist
if (targ.nodeType == 3) target = target.parentNode;
vonnöten? Braucht man das heutzutage noch?

Ehrlich gesagt: Keine Ahnung. Ich habe noch nie ein Safari in der Hand gehabt, in dem das nötig war. Aber ich beobachte ihn auch erst ungefähr seit Version 3. Und ich habe auch nie eine korrekte Angabe gefunden, für welche Safaris das nötig sein soll. Natürlich schadet es nicht, aber ich baue auch keinen Fix ein für ein Problem, das ich nicht selbst reproduzieren kann bzw. das offenbar nur extrem alte Versionen ohne Verbreitung betrifft.

Mathias