webdesign » Javascript Tipps » Wo ist die Maus?

Manchmal benötigt man die Koordinaten des Mauszeigers, um DHTML-Effekte zu steuern. Bei modernen Gecko-Browsern wie Mozilla oder Firefox gibt es keine grösseren Probleme. Etwas aufwändiger hingegen gestaltet es sich beim Internet Explorer, da hier zusätzlich die Scrollbar-Position ermittelt werden muss. Wer den Dinosaurier Netscape 4x berücksichtigen möchte muss ebenfalls einige Besonderheiten beachten.

Für Internet Explorer ist es von Bedeutung, ob er im Quirks- oder Standards Mode arbeitet, da die Referenzierung des body mit Javascript in beiden Modi unterschiedlich erfolgt. Im Quirks Mode erfolgt dies mit document.body, im Standard Mode hingegen mit document.documentElement. Daher erzeugt man zunächst die nötige Referenz:

    // find out if ie runs in quirks mode
    //
    var docEl = (
                 typeof document.compatMode != "undefined" && 
                 document.compatMode        != "BackCompat"
                )? "documentElement" : "body";
    

Nun braucht man zunächst eine Funktion, die den Event onmousemove registriert. Diese wird beispielsweise per onload im body-tag aufgerufen, und setzt einen Zeiger auf die eigentliche Funktion zur Verarbeitung des Events. Da hier nur ein Verweis auf diese Funktion gesetzt wird ohne diese zum jetzigen Zeitpunkt zu rufen, fehlen die sonst üblichen Klammern.
Aus Sentimentalität habe ich noch den if-Zweig mit document.layers eingebaut. Für unseren Lieblings-Dino Netscape 4x muss der Event zusätzlich abgefangen werden.

    // register event
    // capture it for nc 4x
    //
    function init_mousemove() {
        if(document.layers) document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove =	dpl_mouse_pos;
    }
    

Jetzt wird der Event verarbeitet. Während Internet Explorer die Methode window.event nutzt, werten andere Browser wie Mozilla und Firefox den der Funktion automatisch als Parameter zur Verfügung stehenden Event aus (hier "e" genannt). Die Abfrage nach der Methode e stellt sicher, dass jeder Browser nur die Methode ausführt, die er kennt.

Im weiteren Verlauf wird für Internet Explorers die Position des Scrollbars ermittelt und addiert, in die eckigen Klammern wird die vorher erzeugte Referenz auf document.body eingefügt. Für andere Browser wird dies hinter einer Abfrage nach document.all && !document.captureEvents versteckt, um diesen Zweig sicher auf IE zu begrenzen.
Danach werden die Werte zur Anzeige in ein Form-input geschrieben. Für unseren Dino wird anschliessend der abgefangene Event weitergeleitet.

    // handle onmousemove event
    //
    function dpl_mouse_pos(e) {

        // position where mousemove fired
        //
        var xPos    =  e? e.pageX : window.event.x;
        var yPos    =  e? e.pageY : window.event.y;
    
        
        // for ie add scroll position
        //
        if (document.all && !document.captureEvents) {
            xPos    += document[docEl].scrollLeft;
            yPos    += document[docEl].scrollTop;
        }
        
        // display position
        //
        document.feld.ausg.value = "Left = " +xPos +" : Top = " +yPos;
        
        // for the dino pass event
        //
        if (document.layers) routeEvent(e);
    }
    

Sie können sich das fertige Script in einem extra Fenster anzeigen lassen, und ggf. dort den komplettet Quellcode herauskopieren.

Beispiel öffnen