Egenskapen event.clientY
Egenskapen event.clientY innehåller
muspekarens koordinater längs Y-axeln.
För att bestämma koordinater finns även egenskaperna
event.clientX,
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 flytta pekaren, 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 pekaren ä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 händelsens koordinater
med hänsyn till scrollning.
Syntax
event.clientY;
Exempel
När musen rör sig på 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;
});
:
