Eigenschap event.pageY
De eigenschap event.pageY bevat de
coördinaten van de muiscursor op de Y-as.
Voor het bepalen van coördinaten zijn er ook de eigenschappen
event.clientX,
event.clientY,
event.pageX.
Laten we eens kijken naar het verschil tussen clientX/clientY
en pageX/pageY.
Hoe clientX en clientY werken:
als je een venster hebt van 1000 bij 1000
pixels, en de muis staat in het midden, dan zullen clientX
en clientY beide gelijk zijn aan 500. Als
je vervolgens horizontaal of verticaal scrollt,
zonder de cursor te bewegen, dan veranderen de waarden
van clientX en clientY niet, omdat ze worden gemeten
ten opzichte van het venster, niet het document.
Hoe pageX en pageY werken:
als je een venster hebt van 1000 bij 1000
pixels, en de cursor staat in het midden, dan
zullen pageX en pageY gelijk zijn aan 500. Als
je vervolgens 250
pixels naar beneden scrollt, dan wordt pageY gelijk aan 750.
Zo bevatten pageX en pageY de coördinaten
van de gebeurtenis, rekening houdend met scrollen.
Syntaxis
event.pageY;
Voorbeeld
Bij het bewegen van de muis over de pagina zullen we
zijn coördinaten ten opzichte van de browser weergeven
(pageX en pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
