Свойство event.clientX
Die Eigenschaft event.clientX enthält
die Koordinaten des Mauszeigers entlang der X-Achse.
Für die Koordinatenbestimmung gibt es auch die Eigenschaften
event.clientY,
event.pageX,
event.pageY.
Schauen wir uns den Unterschied zwischen clientX/clientY
und pageX/pageY an.
Wie clientX und clientY funktionieren:
wenn Sie ein Fenster mit 1000 mal 1000
Pixeln haben und die Maus sich 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.clientX;
Beispiel
Bei Bewegung der Maus über die Seite werden wir ihre
Koordinaten relativ zum Browserfenster ausgeben
(clientX und clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
