Mauskoordinaten eines Events

Die Position der Maus herauszufinden ist eine häufige Fragestellung. Leider haben die verschiedenen Browserhersteller unterschiedliche Vorstellungen, wie der Browser mit Events (Ereignissen) umzugehen hat.

Ich möchte an dieser Stelle die Funktion getMouseXY vorstellen, die die Koordinaten der Mouse im Window-Kontext herausfindet. Die Funktion verwendet den Coord Prototypen.

Bewegen Sie zum Testen die Maus über dem gelb markierten Bereich. Die Koordinaten werden in der Statuszeile angezeigt und (falls sie einen neueren Browser verwenden) im gelb markierten Bereich.

Erläuterungen

In diesem Beispiel werden die Koordinaten der Mouse angegeben, sobald sie sich über dem gelb markierten Bereich befindendet. Dazu muss dem Browser mitgeteilt werden, dass er Mouse-Events für dieses HTML-Element überwachen soll. Deshalb rufe ich sobald die Seite geladen wurde eine Initialsierungsfunktion auf:

function init(){
  // hole eine Referenz auf den interessierenden Layer
  window.objContainer = getLayerRef("a10");

  // falls captureEvents (NN), überwache folgende Events für den Container
  if(window.objContainer.captureEvents)
    window.objContainer.captureEvents(Event.MOUSEMOVE | Event.MOUSEOUT);

  // folgende Funktionen behandeln folgende Events
  window.objContainer.onmousemove = showPosition;
  window.objContainer.onmouseout = clearStatus;
}
// Funktion init wird aufgerufen, wenn das LOAD-Event ausgelöst wird.
window.onload=init;

Anmerkung:

Besonders widerspenstig verhält sich Netscapes Navigator in der Version 4.x. Als Beispiel soll der gelbe Bereich dienen, welcher durch einen positionierten Layer definiert ist. Eine Positionierung ist notwendig, da Mouse-Events wie z.B. MOUSEOUT nur bei A- und Layer-Elemente beachtet werden. Damit ein DIV-Element auf Events reagieren kann, muss für NN4.x explizit eine absolute oder relative Positionierung per CSS angegeben werden.

Die Style-Anweisungen für den gelben Bereich:

div.ebene {
  position: relative;
  width: 250px; height: 80px;
  background-color: #FFFFCE;
  visibility: visible;
  border: thin dotted #000066;
}

Desweiteren feuert NN4.x nur dann das Event, wenn sich unter dem Mauszeiger auch Inhalt befindet. Damit Sie das leicht nachvollziehen können, enthält der Layer ein transparentes Bild, welches einen Rahmen besitzt. Bewegen Sie die Mouse außerhalb des Bildes, werden die Koordinaten nicht mehr angezeigt - der Browser reagiert nicht mehr auf das Event.

Damit die Mouseposition nur im gelben Bereich angegeben wird, wurden in der init-Funktion entsprechende Funktionen den einzelnen Events zugeordnet.
Diese werden nun hier kurz vorgestellt:

// reagiert auf onmousemove
function showPosition(evt){
  // event-Objekt browserspezifisch bestimmen.
  e = evt || window.event;
  // Koordinaten des Events holen
  mCoord = getMouseXY(e);
  // Ausgabe in die Stauszeile
  window.status = mCoord.toString();
  // Wenn es ein moderner Browser ist, Ausgabe im Layer
  if(document.getElementById) {
    document.getElementById("a10").innerHTML = mCoord.toString();
  }
  return true;
}
// reagiert auf onmouseout
function clearStatus(){
  // Statuszeile löschen
  window.status = "";
  // Ausgabe im Layer löschen
  if(document.getElementById) {
    document.getElementById("a10").innerHTML = "";
  }
  return true;
}

Und nun zum Schluss noch die Funktion, um die sich das ganze Beispiel dreht. Wie sie in der Funktion showPosition gesehen haben, muss ich mich dort nur um die Ausgabe der Koordinaten kümmern, die eigentliche Arbeit erledigt die Funktion getMouseXY. Da diese Funktion sehr allgemein ist, habe ich sie in eine externe Datei ausgelagert, alle anderen Funktionen finden Sie im Quelltext dieser Seite.

function getMouseXY(ev) {
  var pos = new Coord(0,0);
  if(ev.pageX){
    pos.x = ev.pageX;	
    pos.y = ev.pageY;
  } else if(window.event && window.event.clientX) {
    var isStrictMode = document.compatMode 
        && document.compatMode != 'BackCompat' ? true : false;
    var scrollX = isStrictMode ? 
        document.documentElement.scrollLeft : document.body.scrollLeft;
    var scrollY	= isStrictMode ? 
        document.documentElement.scrollTop : document.body.scrollTop;
    pos.x = window.event.clientX + scrollX;
    pos.y = window.event.clientY + scrollY;
  }
  return pos;
}

Dokumentationen zu diesem Thema

Das Objekt Event im Internet Explorer (entsprechendes gilt für Opera 7+)

Handling Event mit Netscape-Browsern

Das Objekt Event im Netscape 4+ bzw. Mozilla

Sollten Sie damit Probleme haben, senden Sie mir eine E-Mail.