Angeklicktes Objekt identifizieren im IE und Firefox

[reinhard]

Hallo Leute,
wieder einmal ein Problem der unterschiedlichen Arbeitsweise des MS-Internet-Explorers (IE) und Firefox.
Ausgangslage:

• ich habe eine Website mit Grafiken, die jeweils verschiedene IDs haben
• wenn ich auf eine Grafik klicke, möchte ich in Javascript feststellen, wie die ID des Objekts lautet, das ich angeklickt habe
• Komischerweise gelingt es mir im Firefox nicht, die ID des Objekts, das einen Event auslöst, festzustellen (gilt auch für andere Parameter des HTML-Tags, z.B. name, class usw)!

Einige Dinge habe ich schon mit selfhtml + Beispielprogrammen aus dem Internet herausgefunden:

Lösung im IE:
Anhand von Beispielprogrammen konnte ich feststellen, daß das Objekt "window.event" das Unterobjekt "srcElement" hat (in selfhtml überigens nicht dokumentiert, richtig?) und hier die Eigenschaft "id" abrufbar ist. Also: "window.event.srcElement.id" liefert problemlos das gewünschte Ergebnis.

ABER:

Lösung im Firefox:
In einem Script setze ich für das Ereignis "onclick" einen Event-Handler mit einem Parameter, z.B. "document.getElementsByName("Bild1")[0].onclick = EventAktion". Die zugehörige Funktion lautet dann "function EventAktion(e){...}". Der Parameter e überträgt auch korrekt das angeklickte Grafikobjekt in das Programm (nur im Firefox, nicht im IE!). So kann ich z.B. die Position des Mausklicks auf der Grafik mit "PosX = e.layerX" abfragen. Auch Breite und Höhe usw. sind kein Problem. Nur die ID kann ich komischerweise nicht abfragen! "e.id" funktioniert nicht: "alert(e.id)" liefert "undefined"! Wie bekomme ich die ID der Grafik heraus? Im Firefox gibt es das Unterobjekt "srcElement" nicht, ebensowenig wie das Objekt "window.event" ("alert(e.srcElement)" liefert "undefined"). Gibt es für den Firefox etwas Vergleichbares?

Vielen Dank im Voraus für die Hilfe,
Reinhard

[Micha]

Hallo reinhard,

Du suchst vermutlich target.

Mit freundlichem Gruß
Micha

[reinhard]

Bingo, das wars!!!
Wie soll denn der Mensch auf soetwas kommen. Aber schön, daß es dieses Forum gibt ...
Vielen Dank und noch schönen Sonntag.
Gruß, Reinhard

Hallo reinhard,

Du suchst vermutlich target.

Mit freundlichem Gruß
Micha

[dicon]

'n Abend Reinhard,

nur für den Fall, dass Du nochmal reinschaust, eine kleine
Cross-Browser-Funktion zum Thema:

getEventTarget: function(e) { return (e.target) ? e.target : e.srcElement; }

Die Funktion ist insofern ganz praktisch, als dass du quasi jedes Element, auf
dem ein Eventlistener liegt, damit abgreifen und weiterarbeiten kannst.

xyFkt: function (e){
        var elemId = getEventTarget(e).id;
        window.alert(elemID);
}

...sollte dir zu jedem die gewünschte ID liefern.

Grüße, dicon

[Stephan]

noch besser geht es mit "this". wird von allen browsern gleich verstanden. denn die eventfunction (onclick, onmousedown,...) wird durch "bild.onmousedown = tu_es;" direkt dem Objekt zugeordnet und ist somit eine methode des Objektes.

Am besten dem object vorher eine parent eigenschaften geben (object.parent = papa;) dann verliert man mit "this.parent" nicht den Fahden.

[molily]

Hallo,

noch besser geht es mit "this". wird von allen browsern gleich verstanden. denn die eventfunction (onclick, onmousedown,...) wird durch "bild.onmousedown = tu_es;" direkt dem Objekt zugeordnet und ist somit eine methode des Objektes.

Das ist im Prinzip natürlich richtig und this reicht in diesem Fall auch aus.

Trotzdem ist this nicht immer die bessere Lösung, sondern hat eine andere Bedeutung. target / srcElement verweisen auf das Element, bei dem das Ereignis tatsächlich passierte. this / currentTarget hingegen auf das Element, dessen Handler das Ereignis gerade verarbeitet. Wenn man Grafiken anklickt und der Handler auch an diesem Elementobjekt lauscht, dann liefern beide (d.h. alle vier, je nach Browser) dieselben Werte. Unterschiedliche Werte liefern sie, wenn das Ereignis erst im DOM-Baum aufsteigen (bubblen) musste, um den Handler auszulösen.

<div><img ...></div>

Würde man hier das click-Event beim div-Element überwachen, wäre this gleich das div-Elementobjekt, target aber das img-Elementobjekt, weil das Ereignis davon ausgeht.

Das nur zur Ergänzung.

Mathias