Egenskaben event.clientX
Egenskaben event.clientX indeholder
musemarkørens koordinater på X-aksen.
For at bestemme koordinater er der også egenskaberne
event.clientY,
event.pageX,
event.pageY.
Lad os se forskellen mellem clientX/clientY
og pageX/pageY.
Hvordan clientX og clientY fungerer:
hvis du har et vindue på 1000 gange 1000
pixels, og musen er i midten, så vil clientX
og clientY begge være lig 500. Hvis
du derefter scroller siden vandret
eller lodret, uden at flytte markøren, så vil værdierne
for clientX og clientY ikke ændre sig, fordi de tælles
i forhold til vinduet, ikke dokumentet.
Hvordan pageX og pageY fungerer:
hvis du har et vindue på 1000 gange 1000
pixels, og markøren er i midten, så
vil pageX og pageY være lig 500. Hvis
du derefter scroller siden 250
pixels ned, så vil pageY blive lig 750.
Således indeholder pageX og pageY koordinaterne
for begivenheden inklusive scroll.
Syntaks
event.clientX;
Eksempel
Ved musebe bevægelse på siden vil vi udskrive
dens koordinater i forhold til browserens vindue
(clientX og clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
