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

javascriptevent.pageY;

Eksempel

Ved bevegelse av musepekeren over siden vil vi vise dens koordinater i forhold til nettleservinduet (pageX og pageY):

html<div id="elem">0 : 0</div>

javascriptlet elem = document.getElementById('elem');

document.addEventListener('mousemove', function(event) {
  elem.innerHTML = event.pageX + ' : ' + event.pageY;
});

Результат:

Se også