Eigenschap event.clientY
De eigenschap event.clientY bevat
de coördinaten van de muiscursor op de Y-as.
Voor het bepalen van de coördinaten zijn er ook de eigenschappen
event.clientX,
event.pageX,
event.pageY.
Laten we het verschil bekijken 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 de pagina horizontaal of verticaal
scrolt, zonder de cursor te bewegen, dan veranderen de waarden
van clientX en clientY niet, omdat ze worden gemeten
ten opzichte van het venster, niet van 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 de pagina 250
pixels naar beneden scrolt, dan wordt pageY gelijk aan 750.
Zo bevatten pageX en pageY de coördinaten
van de gebeurtenis rekening houdend met scrollen.
Syntaxis
event.clientY;
Voorbeeld
Bij het bewegen van de muis over de pagina zullen we
zijn coördinaten ten opzichte van het browservenster
(clientX en clientY) weergeven:
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
