MouseEvent: pageX-Eigenschaft

Ein double Gleitkommazahl der Pixel vom linken Rand des Dokuments, an dem die Maus geklickt wurde, unabhängig von Scrollen oder Ansichtsfensterpositionierung, die möglicherweise in Kraft sind.

Diese Eigenschaft wurde ursprünglich in der Touch-Events-Spezifikation als langes Integer spezifiziert, aber im CSSOM View Module wurde sie als Double-Precision-Gleitkommazahl neu definiert, um Subpixel-Präzision zu ermöglichen. Auch wenn numerische Typen beide als Number in JavaScript repräsentiert werden, könnten sie intern im Browercode unterschiedlich gehandhabt werden, was zu möglichen Verhaltensunterschieden führen kann.

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

Schauen wir uns ein einfaches 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 linke obere 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 gehalten; die Box, auf die wir für Mausereignisse achten werden, hat die Klasse "box". Sie 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

Die in diesem Beispiel verwendeten CSS sind 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(), um die Funktion updateDisplay() als Ereignishandler 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:

Sie können auch ein Beispiel sehen, das zeigt, wie auf die Mauspositionsinformationen in jedem verfügbaren Koordinatensystem zugegriffen werden kann.

• MouseEvent.pageY
• Koordinatensysteme