Egenskapen event.pageX
Egenskapen event.pageX inneholder
musekursorens koordinater langs X-aksen.
For å bestemme koordinatene finnes det også egenskapene
event.clientX,
event.clientY,
event.pageY.
La oss se på forskjellen mellom clientX/clientY
og pageX/pageY.
Hvordan clientX og clientY fungerer:
hvis du har et vindu på 1000 ganger 1000
piksler, og musepekeren er i sentrum, vil clientX
og clientY begge være 500. Hvis
du deretter scroller siden horisontalt
eller vertikalt, uten å flytte pekeren, vil verdiene
for clientX og clientY ikke endre seg, fordi de telles
i forhold til vinduet, ikke dokumentet.
Hvordan pageX og pageY fungerer:
hvis du har et vindu på 1000 ganger 1000
piksler, og pekeren er i sentrum, vil
pageX og pageY være 500. Hvis
du deretter scroller siden 250
piksler nedover, vil pageY bli 750.
Dermed inneholder pageX og pageY hendelsens koordinater
med hensyn til scrolling.
Syntaks
event.pageX;
Eksempel
Ved bevegelse av musepekeren over siden vil vi vise
dens koordinater i forhold til nettleservinduet
(pageX og pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
