DiepageX schreibgeschützte Eigenschaft desMouseEvent Interfaces gibt die X-Koordinate (horizontal) in Pixeln zurück, an der die Maus relativ zur linken Kante des gesamten Dokuments geklickt wurde. Dies schließt alle Teile des Dokuments ein, die derzeit nicht sichtbar sind.

Da diese Eigenschaft basierend auf der Kante des Dokuments definiert ist, berücksichtigt sie jeden horizontalen Bildlauf der Seite. Beispielsweise, wenn die Seite so gescrollt wird, dass 200 Pixel der linken Seite des Dokuments aus dem Sichtfeld herausgeschoben werden, und die Maus 100 Pixel von der linken Kante des Blickfelds nach innen geklickt wird, gibt der vonpageX zurückgegebene Wert 300 sein.

Ursprünglich wurde diese Eigenschaft alslong-Integer definiert. DasCSSOM View Modul hat es neu alsdouble-Fließkommazahl definiert. Siehe den AbschnittBrowser-Kompatibilität für Details.

SieheKoordinatensysteme für zusätzliche Informationen zu in dieser Weise angegebenen Koordinaten.

Wert

Einedouble-Fließkommazahl von Pixeln von der linken Kante desDokuments, an der die Maus geklickt wurde, unabhängig von jeglichem Scrollen oder der Positionierung des Viewports, die möglicherweise in Kraft sind.

Diese Eigenschaft wurde ursprünglich in der Touch Events Spezifikation als long Integer spezifiziert, aber im CSSOM View Modul neu definiert, um eine doppelte Genauigkeit der Fließkommazahl zu ermöglichen, um Präzision im Subpixelbereich zu erlauben. Auch wenn numerische Typen beide in JavaScript durchNumber dargestellt werden, können sie intern im Browsercode unterschiedlich behandelt werden, was zu potenziellen Verhaltensunterschieden führt.

SieheBrowser-Kompatibilität, um zu erfahren, welche Browser aktualisiert wurden, um den überarbeiteten Datentyp zu verwenden.

Beispiele

Anzeige der Mausposition relativ zum Seitenursprung

Schauen wir uns ein Beispiel an, das die Position der Maus relativ zum Ursprung der Seite zeigt. Da dieses Beispiel in einem<iframe> präsentiert wird, ist diese obere linke Ecke die obere linke Ecke des Rahmens, nicht das Browserfenster.

HTML

<div>  <p>Move the mouse around in this box to watch its coordinates change.</p>  <p><code>pageX</code>: <span>n/a</span></p>  <p><code>pageY</code>: <span>n/a</span></p></div>

Das HTML ist einfach; das Feld, auf das wir Mausereignisse überwachen, hat die Klasse"box". Es gibt zwei<span> Elemente, eines mit der ID"x" und eines mit der ID"y". Diese werden jedes Mal aktualisiert, wenn ein Ereignis auftritt, um die neuesten Mauskoordinaten relativ zur Seite zu enthalten.

CSS

Das für dieses Beispiel verwendete CSS wird unten gezeigt.

.box {  width: 400px;  height: 250px;  border: 2px solid darkblue;  background-color: blue;  color: white;  font:    16px "Zilla",    "Open Sans",    "Helvetica",    "Arial",    sans-serif;}

JavaScript

const box = document.querySelector(".box");const pageX = document.getElementById("x");const pageY = document.getElementById("y");function updateDisplay(event) {  pageX.innerText = event.pageX;  pageY.innerText = event.pageY;}box.addEventListener("mousemove", updateDisplay);box.addEventListener("mouseenter", updateDisplay);box.addEventListener("mouseleave", updateDisplay);

Der JavaScript-Code verwendetaddEventListener(), um die FunktionupdateDisplay() als Ereignis-Handler für diemousemove,mouseenter undmouseleave Ereignisse zu registrieren.

updateDisplay() ersetzt den Inhalt der<span> Elemente, die die X- und Y-Koordinaten enthalten sollen, durch die Werte vonpageX undpageY.

Resultat

Probieren Sie es hier aus:

Weitere Beispiele

Sie können auch ein Beispiel sehen, das demonstriert,wie Sie auf die Mauspositionsinformationen zugreifen in jedem verfügbaren Koordinatensystem.

Spezifikationen

Bevor es zur CSSOM View Spezifikation hinzugefügt wurde, warenpageX undpageY auf derUIEvent Schnittstelle in einem begrenzten Subset von Browsern für eine kurze Zeit verfügbar.

Browser-Kompatibilität

Siehe auch

• MouseEvent.pageY
• Koordinatensysteme