MouseEvent: pageX-Eigenschaft

Eine double Gleitkommazahl, die die Anzahl der Pixel vom linken Rand des Dokuments angibt, an dem die Maus geklickt wurde, unabhängig von Scrollen oder der Positionierung im Ansichtsfenster, die möglicherweise aktiv ist.

Diese Eigenschaft wurde ursprünglich in der Touch Events-Spezifikation als langes Integer festgelegt, aber im CSSOM View Module zu einer Gleitkommazahl mit doppelter Genauigkeit umdefiniert, um Subpixelpräzision zu ermöglichen. Obwohl beide Zahlentypen in JavaScript durch Number dargestellt werden, können sie intern im Code des Browsers unterschiedlich behandelt werden, was zu potenziellen Verhaltensunterschieden führen kann.

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

Schauen wir uns ein Beispiel an, das Ihnen die Position der Maus relativ zum Ursprung der Seite zeigt. Da dieses Beispiel in einem <iframe> präsentiert wird, ist die 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 Mausereignisse beobachten werden, hat die Klasse "box". Es hat zwei <span>-Elemente, eines mit der ID "x" und eines mit der ID "y". Diese werden jedes Mal, wenn ein Ereignis auftritt, aktualisiert, um die neuesten Mauskoordinaten relativ zur Seite zu enthalten.

CSS

Nachfolgend ist das für dieses Beispiel verwendete CSS dargestellt.

.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(), um die Funktion updateDisplay() als Ereignis-Handler für die mousemove, mouseenter und mouseleave-Ereignisse zu registrieren.

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

Ergebnis

Probieren Sie es hier aus:

Sie können auch ein Beispiel ansehen, das zeigt, wie Sie die Mausposition abrufen können, um Informationen in jedem verfügbaren Koordinatensystem zu erhalten.

• MouseEvent.pageY
• Koordinatensysteme