MouseEvent pageX-Eigenschaft

DOM-Event MouseEvent

Definition und Verwendung

Wenn ein Mausereignis ausgelöst wird, gibt die pageX-Eigenschaft die horizontale Koordinate des Mauszeigers (relativ zum Dokument) zurück.

Dokument ist die Webseite.

Tipp:Um die vertikale Koordinate des Mauszeigers (relativ zum Dokument) zu erhalten, verwenden Sie pageY-Eigenschaft.

Anmerkung:Diese Eigenschaft ist schreibgeschützt.

Anmerkung:Diese Eigenschaft ist nicht standardisiert, aber sie wird für die meisten Hauptbrowser verwendet.

Beispiel

Beispiel 1

Geben Sie die Koordinaten des Mauszeigers an, wenn der Mausknopf auf dem Element gedrückt wird:

var x = event.pageX;     // Horizontale Koordinate erhalten
var y = event.pageY;     // Vertikale Koordinate erhalten
var coor = "X coords: " + x + ", Y coords: " + y;

Probieren Sie es selbst aus

Beispiel 2

Geben Sie die Koordinaten des Mauszeigers beim Bewegen über dem Element an:

var x = event.pageX;
var y = event.pageY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

Probieren Sie es selbst aus

Beispiel 3

Demonstration der Unterschiede zwischen pageX und pageY sowie screenX und screenY:

var pX = event.screenX;
var cX = event.pageX;
var pY = event.screenY;
var cY = event.pageY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "screen - X: " + cX + ", Y coords: " + cY;

Probieren Sie es selbst aus

Syntax

event.pageX

Technische Details

Rückgabewert: Zahl, die die horizontale Koordinate des Mauszeigers in Pixeln angibt.
DOM-Version: Keine.

Browser-Unterstützung

Eigenschaft Chrome IE Firefox Safari Opera
pageX Unterstützung 12.0 Unterstützung Unterstützung Unterstützung

Verwandte Seiten

HTML DOM Referenzhandbuch:MouseEvent pageY-Eigenschaft

HTML DOM Referenzhandbuch:MouseEvent clientX-Eigenschaft

HTML DOM Referenzhandbuch:MouseEvent clientY-Eigenschaft

HTML DOM Referenzhandbuch:MouseEvent screenX-Eigenschaft

HTML DOM Referenzhandbuch:MouseEvent screenY-Eigenschaft

DOM-Event MouseEvent