MouseEvent: pageX-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die pageX schreibgeschützte Eigenschaft des MouseEvent 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 von pageX zurückgegebene Wert 300 sein.
Ursprünglich wurde diese Eigenschaft als long-Integer definiert. Das CSSOM View Modul hat es neu als double-Fließkommazahl definiert. Siehe den Abschnitt Browser-Kompatibilität für Details.
Siehe Koordinatensysteme für zusätzliche Informationen zu in dieser Weise angegebenen Koordinaten.
Wert
Eine double-Fließkommazahl von Pixeln von der linken Kante des Dokuments, 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 durch Number dargestellt werden, können sie intern im Browsercode unterschiedlich behandelt werden, was zu potenziellen Verhaltensunterschieden führt.
Siehe Browser-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 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, 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 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, durch die Werte von pageX und pageY.
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
| Specification |
|---|
| CSSOM View Module # dom-mouseevent-pagex |
Bevor es zur CSSOM View Spezifikation hinzugefügt wurde, waren pageX und pageY auf der UIEvent Schnittstelle in einem begrenzten Subset von Browsern für eine kurze Zeit verfügbar.