Um einige Aktionen als Reaktion auf die Bewegung des Cursors im Browserfenster zu programmieren, ist es manchmal notwendig, seine Koordinaten zu bestimmen. Dies kann durch ein Skript erfolgen, das in der Lage ist, Ereignisse zu verfolgen, die im Browser auftreten. Ein clientseitiges JavaScript-Skript verfügt über diese Fähigkeit. Im Folgenden wird eine der Optionen zum Erhalten der Cursorkoordinaten unter Verwendung der Fähigkeiten dieser Sprache beschrieben.
Anweisungen
Schritt 1
Verwenden Sie die Eigenschaften des Ereignisobjekts, um die aktuellen Koordinaten des Cursors abzurufen. Dieses Objekt besitzt eine ganze Reihe von Eigenschaften, die für die Bestimmung der Koordinaten des Mauszeigers relevant sind. Die Eigenschaft LayerX enthält den in Pixeln gemessenen Abstand vom linken Rand der aktuellen Ebene und LayerY - den gleichen Abstand vom oberen Rand. Diese beiden Eigenschaften haben Synonyme - anstelle von event. LayerX können Sie event.x schreiben und anstelle von event. LayerY können Sie event.y schreiben. Die Eigenschaften pageX und pageY enthalten die horizontalen und vertikalen Koordinaten des Cursors relativ zum oberen linken Rand des Browserfensters, und die Eigenschaften screenX und screenY enthalten ähnliche Werte relativ zum Monitorbildschirm.
Schritt 2
Fügen Sie Ihrem Code die Überprüfung des Browsertyps hinzu und verwenden Sie die Eigenschaften clientX und clientY zusätzlich zu den oben genannten Eigenschaften für das Ereignisobjekt. Dies ist notwendig, da Microsoft in seinem Internet Explorer-Browser eine andere Eigenschaftsbezeichnung verwendet. Sie können beide Ansätze zur Koordinatenbestimmung kombinieren, zum Beispiel wie folgt:
if (evevnt.pageX || evevnt.pageY) {
KoordinateX = Ereignis. SeiteX;
KoordinateY = eevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
KoordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) – document.documentElement.clientLeft;
KoordinateY = eevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) – document.documentElement.clientTop;
}
Schritt 3
Platzieren Sie den Koordinatendefinitionscode in einer benutzerdefinierten Funktion. Beispielsweise:
Funktion GetMouse (event) {
var-KoordinateX = 0, KoordinateY = 0;
if (! event) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
KoordinateX = Ereignis. SeiteX;
KoordinateY = eevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
KoordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) – document.documentElement.clientLeft;
KoordinateY = eevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) – document.documentElement.clientTop;
}
return {"koordX": KoordinateX, "koordY": KoordinateY};
}
Diese Funktion gibt ein Array von zwei benannten Elementen zurück, von denen das erste (mit dem Schlüssel coordX) die X-Koordinate und das zweite (coordY) die Y-Koordinate enthält.
Schritt 4
Rufen Sie diese Funktion bei einem Ereignis auf - zum Beispiel beim Mausbewegungsereignis (onmousemove) im Dokumentkontext. Das folgende Beispiel verwendet eine Funktion, um die Mauskoordinaten in der Statusleiste auszugeben:
document.onmousemove = Funktion (evevnt) {var CurCoord = GetMouse (eevnt); window.status = "Koord X:" + CurCoord.coordX + "px, Koord Y:" + CurCoord.coordY + "px";};
