Klick-Events auf Images abfangen oder weiterleiten

Events abfangen, auswerten und weiterleiten

Nach der kleinen Einführung über die Verarbeitung von Events mit Hilfe von JavaScript auf der Seite Event-Tracking möchten wir auf dieser Seite nicht mehr ausführlich auf weitere Einzelheiten eingehen, sondern nur ein weiteres Beispiel präsentieren. In diesem Exempel sollen Klicks auf ein Image abgefangen und weitergeleitet werden.

Ü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)

Eine fraktale Komposition

Ein Image zu verlinken bereitet in der Regel keine Probleme und so hätte auch das Bild von dieser Seite einfach zu ein vorgegebenes Zielseite oder zu einer größeren Ansicht der Grafik verlinkt werden können. Davon abweichend und nur um die Einsatzmöglichkeiten von JavaScript ein wenig zu demonstrieren, wurde das vorausgehende Image nicht verlinkt und dennoch erfolgt bei einem Klick aufs Image eine Weiterleitung zu einem vorgegebenen Webseite, in diesem Fall zur einführenden Seite zum Thema Event-Tracking.

Das Code-Listing wurde bereits auf der einführenden Seite beschrieben und bringt im Wesentlichen nichts Neues mit sich. Lediglich an Stelle des Event-Handlers onmouseover wird in diesem Beispiel der Event-Handler onclick verwendet. Weiterhin wird mit alert ein kleines Dialogfenster geöffnet und der User muss erst mit seinem OK der Weiterleitung zustimmen muss.

Code-Listing (Weiterleitung mit JavaScript):

<script type="text/javascript">
"use strict";

var klickimbild = document.getElementById("attachment_584");

if (window.addEventListener) {
    klickimbild.addEventListener("click", leiteImageKlicks, false); // andere Browser
}
else if (window.attachEvent) {
    klickimbild.attachEvent("onclick", leiteImageKlicks);           // ältere IE
}

function leiteImageKlicks(ereign) {
    var welches;

    if (window.event)           ereign  = window.event;       // ältere IE (MSEventObj)
    if (ereign.target)          welches = ereign.target;      // andere Browser
    else if (ereign.srcElement) welches = ereign.srcElement;  // ältere IE

    if (welches.nodeName.toLowerCase() == "img") {

        alert("Es erfolgt eine Weiterleitung zur Seite:  \n\n" +
              "'Event-Tracking: Klicks speichern und auswerten'.");

        window.location.href = "http://www.coder-welten.com/event-tracking/";
    }
}
</script>

Mehr zum Thema unter:

← Event-Tracking «