Egenskapen event.pageY
Egenskapen event.pageY innehåller
muspekarens koordinater längs Y-axeln.
För att bestämma koordinater finns även egenskaperna
event.clientX,
event.clientY,
event.pageX.
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, så kommer clientX
och clientY båda vara 500. Om
du sedan scrollar sidan horisontellt
eller vertikalt, utan att flytta muspekaren, så 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, så
kommer pageX och pageY att vara 500. Om
du sedan scrollar sidan 250
pixlar nedåt, så kommer pageY att bli 750.
Således innehåller pageX och pageY händelsens koordinater
med hänsyn till scrollning.
Syntax
event.pageY;
Exempel
När musen rör sig över sidan kommer vi att visa
dess koordinater i förhållande till webbläsarfönstret
(pageX och pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
