Beispiel
Ausgabe der Koordinaten des Mauszeigers wenn die Maustaste auf einem Element angeklickt wird:
var x = event.pageX; // Get the horizontal coordinate
var
y = event.pageY; // Get the vertical coordinate
var coor = "X coords: "
+ x + ", Y coords: " + y;
Das Ergebnis der Koor könnte sein:
X coords: 162, Y coords: 40 Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die pageX Eigenschaft gibt die horizontal (entsprechend dem Dokument) des Mauszeigers koordinieren, wenn ein Maus-Ereignis ausgelöst wurde.
Das Dokument ist die Web-Seite.
Tipp: Um die vertikalen (nach dem Dokument) des Mauszeigers koordinieren, verwenden Sie die pageY Eigenschaft.
Hinweis: Diese Eigenschaft ist schreibgeschützt.
Hinweis: Diese Eigenschaft ist nicht Standard, aber funktioniert in den meisten gängigen Browsern.
Browser-Unterstützung
| Eigentum | |||||
|---|---|---|---|---|---|
| pageX | Ja | 12.0 | Ja | Ja | Ja |
Syntax
event .pageX
Technische Details
| Rückgabewert: | Eine Zahl ist, die die horizontale des Mauszeigers Koordinate, in Pixeln |
|---|---|
| DOM Version: | Keiner |
Mehr Beispiele
Beispiel
Ausgabe der Koordinaten des Mauszeigers während sich der Mauszeiger über einem Element bewegt:
var x = event.pageX;
var y = event.pageY;
var coor = "X coords: "
+ x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
Versuch es selber " Beispiel
Eine Demonstration der Unterschiede zwischen clientX und clientY und screenX und screenY:
var pX = event.pageX;
var cX = event.clientX;
var pY =
event.pageY;
var cY = event.clientY;
var coords1 = "page - X: " +
pX + ", Y coords: " + pY;
var coords2 = "client - X: " +
cX + ", Y
coords: " + cY;
Versuch es selber " Verwandte Seiten
HTML - DOM - Referenz: MouseEvent pageY Property
HTML - DOM - Referenz: MouseEvent clientX Property
HTML - DOM - Referenz: MouseEvent clientY Property
HTML - DOM - Referenz: MouseEvent screenX Property
HTML - DOM - Referenz: MouseEvent screenY Property
<Ereignisobjekt