Die Eigenschaft event.pageY
Die Eigenschaft event.pageY enthält
die Koordinaten des Mauszeigers auf der Y-Achse.
Zur Bestimmung der Koordinaten gibt es auch die Eigenschaften
event.clientX,
event.clientY,
event.pageX.
Lassen Sie uns den Unterschied zwischen clientX/clientY
und pageX/pageY betrachten.
Wie clientX und clientY funktionieren:
wenn Sie ein Fenster mit 1000 mal 1000
Pixeln haben und sich die Maus in der Mitte befindet, dann sind clientX
und clientY beide gleich 500. Wenn
Sie dann die Seite horizontal oder vertikal scrollen,
ohne den Cursor zu bewegen, ändern sich die Werte
von clientX und clientY nicht, da sie relativ
zum Fenster und nicht zum Dokument gezählt werden.
Wie pageX und pageY funktionieren:
wenn Sie ein Fenster mit 1000 mal 1000
Pixeln haben und der Cursor sich in der Mitte befindet, dann
sind pageX und pageY gleich 500. Wenn
Sie dann die Seite um 250
Pixel nach unten scrollen, wird pageY gleich 750.
Somit enthalten pageX und pageY die Koordinaten
des Ereignisses unter Berücksichtigung des Scrollens.
Syntax
event.pageY;
Beispiel
Bei Bewegung der Maus über die Seite werden wir ihre
Koordinaten relativ zum Browserfenster ausgeben
(pageX und pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
