Egenskapen event.pageY
Egenskapen event.pageY inneholder
musepekerens koordinater på Y-aksen.
For å bestemme koordinatene finnes det også egenskapene
event.clientX,
event.clientY,
event.pageX.
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 musepekeren, 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 musepekeren 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 scrolling tatt i betraktning.
Syntaks
event.pageY;
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;
});
:
