MouseEvent: pageX-Eigenschaft

Wert

Eine double-Gleitkommazahl von Pixeln vom linken Rand des Dokuments, an dem die Maus geklickt wurde, unabhängig von eventuellem Scrollen oder der Positionierung des Ansichtsfensters.

Diese Eigenschaft wurde ursprünglich in der Touch-Events-Spezifikation als ganzzahliger Wert angegeben, wurde aber im CSSOM View Module in eine Gleitkommazahl mit doppelter Genauigkeit umgewandelt, um Subpixel-Präzision zu ermöglichen. Obwohl beide numerischen Typen in JavaScript als Number dargestellt werden, können sie intern im Browsercode unterschiedlich behandelt werden, was zu unterschiedlichen Verhaltensweisen führen kann.

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

Beispiele

Anzeige der Mausposition relativ zum Ursprung der Seite

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 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 Feld, das wir für Mausereignisse beobachten werden, hat die Klasse "box". Es enthält 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 anzuzeigen.

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 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 die X- und Y-Koordinaten enthalten sollen, mit den Werten von pageX und pageY.

Ergebnis

Probieren Sie es hier aus:

Weitere Beispiele

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

Spezifikationen

Bevor sie zur CSSOM-View-Spezifikation hinzugefügt wurden, waren pageX und pageY in einer begrenzten Anzahl von Browsern für kurze Zeit auf der UIEvent-Schnittstelle verfügbar.

Browser-Kompatibilität

Siehe auch

• MouseEvent.pageY
• Koordinatensysteme