MouseEvent: pageX-Eigenschaft

Eine double-Gleitkommazahl von Pixeln vom linken Rand des Dokuments, bei dem die Maus geklickt wurde, unabhängig von jeglichem Scrollen oder der Positionierung des Ansichtsfensters, das möglicherweise in Kraft ist.

Diese Eigenschaft wurde ursprünglich in der Touch Events-Spezifikation als langes Integer spezifiziert, aber im CSSOM View-Modul zu einer doppelt-genauen Gleitkommazahl umdefiniert, um Subpixel-Genauigkeit zu ermöglichen. Obwohl beide numerischen Typen in JavaScript als Number dargestellt werden, können sie intern im Code des Browsers unterschiedlich behandelt werden, was zu potenziellen Verhaltensunterschieden führen kann.

Siehe Browser-Kompatibilität, um herauszufinden, welche Browser auf den überarbeiteten Datentyp aktualisiert wurden.

Betrachten Sie ein Beispiel, das Ihnen die Mausposition relativ zum Ursprungsort der Seite zeigt. Da dieses Beispiel in einem <iframe> präsentiert wird, ist diese obere linke Ecke die obere linke Ecke des Rahmens, nicht des Browserfensters.

HTML

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

Das HTML ist einfach; das Kästchen, auf das wir für Mausereignisse achten werden, hat die Klasse "box". Es enthält zwei <span>-Elemente, eines mit der ID "x" und eines mit der ID "y". Diese werden bei jedem Auftreten eines Ereignisses aktualisiert, 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, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);

Der JavaScript-Code verwendet addEventListener() zur Registrierung der Funktion updateDisplay() als Ereignishandler für die Ereignisse mousemove, mouseenter und mouseleave.

updateDisplay() ersetzt den Inhalt der für das Halten der X- und Y-Koordinaten vorgesehenen <span>-Elemente mit den Werten von pageX und pageY.

Ergebnis

Probieren Sie es hier aus:

Sie können auch ein Beispiel sehen, das zeigt, wie der Zugriff auf die Mausposition in jedem verfügbaren Koordinatensystem funktioniert.

• MouseEvent.pageY
• Koordinatensysteme