Ermittlung der x- und y-Koordinaten bei Ereignissen
In den Beispielen auf der Einstiegseite unseres kleinen Tutorials über Event-Tracking wurden die Elemente innerhalb eines Bereiches ermittelt, die ein Ereignis durch einen User auslösten, um dieses Event auszuwerten und zu verarbeiten. Im Beispiel auf dieser geht es nicht darum ein Element zu ermitteln, sondern um die Position zu erfassen, an den ein Event innerhalb eines Elementes ausgelöst wurde.
Übersicht Event- und Klick-Tracking:
- Event-Tracking (Klicks speichern und auswerten)
- Einzelheiten (zum Abfangen und Auswerten von Events)
- Klick-Events (auf Images abfangen oder weiterleiten)
- Positionen ermitteln (von Events innerhalb eines Elementes)
Nach der Betätigung des Buttons wird ein neues Bild geladen. Da das Beispiel auf dieser Seite nur als Demo dient, ist das Auswählen oder das Laden von externen Grafiken nicht möglich.
der Grafik und die Auswertung des Events eingeblendet werden:
Einsatzmöglichkeiten
Die Einsatzmöglichkeiten für die Erfassung von Daten sind vielseitig, unter anderem könnten die Koordinaten der Orte auf einer Karte ausgewertet werden, auf denen User besonders häufig klicken.
Oder statt der Kommentare könnte ein Grundgerüst für eine Image-Mappe genutzt werden, um dieses ausgefüllt an eine in einem Formular eingebettete Textarea zu übergeben und zusammen mit weiteren Angaben im Formular an PHP zu senden.
Einzelheiten
Wie bereits beim zweiten und dritten Beispiel geschehen, so werden auch in diesem Beispiel wieder die Methoden addEventListener und attachEvent mit einer Fallunterscheidung zur Registrierung von Events genutzt, mit dem Unterschied, dass nur die Klick-Events vom Element mit der ID “NeuesImage” gewertet werden.
Gut ersichtlich im Code-Listing ist, dass mit dem Event-Handler onclick bei einem Klick auf dem Button die Funktion lade_ein_neues_Image aufgerufen wird, die ein anderes Image nachladet. Beachtenswert ist jedoch, dass dem zu überwachenden Element die CSS Eigenschaft Position mit dem Wert absolute oder relative zugewiesen werden muss, um genaue Ergebnisse zu erhalten.
Der Grund ist relativ einfach. Mit den Eigenschaften layerX und layerY wird der Abstand zur linken oberen Ecke erfasst, jedoch nicht zur linken oberen Ecke des Elementes, sondern des nächst höheren Elternelementes. Wurde eine CSS-Positionsangabe vergessen, so wird nicht die relative oder absolute Position innerhalb eines übergeordneten Elementes berücksichtigt, sondern die Position innerhalb eines Dokumentes.
Etwas undurchsichtig ist hingegen der Umstand, dass in der Literatur darauf verwiesen wird, dass das Netscape Layer-Objekt nicht mehr von neueren Browsern unterstützt wird, doch bei den Eigenschaften layerX und layerY handelt es sich um Eigenschaften des Event-Objektes, welches durchaus von neuzeitlichen Browsern unterstützt wird (Irrtum vorbehalten). Von den Entwicklern der WebKit Engine werden hingegen wohl beide Eigenschaften als veraltet angesehen. Siehe hierzu die Anmerkungen unter dem Stichpunkt Unterschiede und Gemeinsamkeiten.
Bei offsetX und offsetY handelt es sich praktisch um eine Alternative zu layerX und layerY, die von älteren und neueren Versionen des IEs verstanden wird.
Mit innerHTML werden letztendlich die ermittelten Werte ins Dokument geschrieben. Eine Alternative, wie firstChild.nodeValue, eignet sich nur wenn die Area mit einem Text vorbelegt wurde, da nodeValue sich auf den Inhalt von gefüllten Knoten bezieht, jedoch nicht auf inhaltslose Elemente.
Codelisting des Beispiels:
<!DOCTYPE html> <html> <head> <title>Position von Events im Element ermitteln</title> </head> <body> <div style="text-align:center; margin-bottom: 28px"> <img src="http://www.coder-welten.com/intern/javascripts/grafiken/demo-events.jpg" alt="Image" id="NeuesImage" style="position:relative"><br> <input type="button" value="Lade ein neues Image" onclick="lade_ein_neues_Image()"> </div> <div style="text-align:center"> <textarea name="einblendung" cols="58" rows="9"></textarea> </div> <script type="text/javascript"> "use strict"; var hm_img_element = document.getElementById("NeuesImage"); /*-- Eine Fallunterscheidung um abwaertskompatibel zu bleiben --------------------*/ if (window.addEventListener) { hm_img_element.addEventListener("click", werte_klicks_aus, false); } else if (window.attachEvent) { hm_img_element.attachEvent("onclick", werte_klicks_aus); } /*-- Ein neues Bild laden --------------------------------------------------------*/ function lade_ein_neues_Image() { var bild_n = "http://www.coder-welten.com/intern/javascripts/grafiken/demo-events-gross.jpg"; hm_img_element.src = bild_n; } /*-- Die x- und y-Koordinaten ermitteln, an denen ein Event im Element erfolgte --*/ function werte_klicks_aus(eve) { if (window.event) { var winls = window.event.offsetX; // von links aeltere IE var winlo = window.event.offsetY; // von oben } else { var winls = eve.layerX; // von links andere Browser var winlo = eve.layerY; // von oben } /*-- Die Ausgabe vorbereiten -----------------------------------------------------*/ var imap = "Koordinaten bei einem Klick innerhalb des Bildes\n\n"; imap += "Abstand zum linken Bildrand: "+ Math.round(winls) +"px\n"; imap += "Abstand vom oberen Bildrand: "+ Math.round(winlo) +"px\n\n"; imap += "Größe des Bildes\n\n"; imap += "width: " + Math.round(hm_img_element.width) +"px\n"; imap += "height: "+ Math.round(hm_img_element.height) +"px\n"; document.getElementsByName("einblendung")[0].innerHTML = imap; } </script> </body> </html>
Hinweis: Obwohl eigentlich Nachkommastellen nicht erwartet wurden, lieferte der IE 11 gleich 14 davon, so dass sich Math.round bei allen Zahlenwerten erforderlich machte.
Weitere zum Thema gehörende Seiten:
Event-Tracking | Klick-Events «
Hallo, ich konnte dieses script hier sehr gut verwenden, vielen Dank! Allerdings beschränkt es sich auf die xy Koordinaten in einem Element. Gibt es denn auch eine Möglichkeit, die absolute Position im Dokument festzustellen?
Ich möchte nämlich in einem Menu (fixed) die Untermenus farblich verändern, wenn der Benutzer die Seite hoch oder herunterscrollt, so daß immer das zum Text passende Untermenu hervorgehoben wird.
Danke!
Es gibt unterschiedliche Möglichkeiten mit CSS und/oder JavaScript auf die Gestaltung Einfluss zu nehmen. Jetzt näher darauf einzugehen, würde wohl den Umfang einer Antwort sprengen.