Egenskapen event.clientX
Egenskapen event.clientX innehåller
muspekarens koordinater på X-axeln.
För att bestämma koordinater finns även egenskaperna
event.clientY,
event.pageX,
event.pageY.
Låt oss titta på skillnaden mellan clientX/clientY
och pageX/pageY.
Hur clientX och clientY fungerar:
om du har ett fönster som är 1000 gånger 1000
pixlar, och musen är i mitten, då kommer clientX
och clientY båda vara 500. Om
du sedan scrollar sidan horisontellt
eller vertikalt, utan att röra muspekaren, kommer värdena
för clientX och clientY inte att ändras, eftersom de räknas
i förhållande till fönstret, inte dokumentet.
Hur pageX och pageY fungerar:
om du har ett fönster som är 1000 gånger 1000
pixlar, och muspekaren är i mitten, då
kommer pageX och pageY att vara 500. Om
du sedan scrollar sidan 250
pixlar nedåt, kommer pageY att bli 750.
Således innehåller pageX och pageY koordinaterna
för händelsen med hänsyn till scrollning.
Syntax
event.clientX;
Exempel
När musen rör sig över sidan kommer vi att visa
dess koordinater i förhållande till webbläsarfönstret
(clientX och clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
