Egenskapen event.pageX
Egenskapen event.pageX innehåller
musmarkörens koordinater längs X-axeln.
För att bestämma koordinater finns även egenskaperna
event.clientX,
event.clientY,
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 på 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 markören, så kommer värdena
för clientX och clientY inte ä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 på 1000 gånger 1000
pixlar, och markören är i mitten, så
kommer pageX och pageY vara 500. Om
du sedan scrollar sidan 250
pixlar nedåt, så kommer pageY att bli 750.
Således innehåller pageX och pageY koordinaterna för
händelsen med hänsyn till scrollning.
Syntax
event.pageX;
Exempel
Vid musrörelse ö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;
});
:
