Proprietatea event.pageX
Proprietatea event.pageX conține
coordonatele cursorului mouse-ului pe axa X.
Pentru determinarea coordonatelor există de asemenea proprietățile
event.clientX,
event.clientY,
event.pageY.
Să vedem diferența dintre clientX/clientY
și pageX/pageY.
Cum funcționează clientX și clientY:
dacă ai o fereastră de 1000 pe 1000
pixeli, iar mouse-ul este în centru, atunci clientX
și clientY vor fi ambele egale cu 500. Dacă
derulezi apoi pagina pe orizontală
sau verticală, fără a mișca cursorul, atunci valorile
clientX și clientY nu se vor schimba, deoarece se numără
relativ la fereastră, nu la document.
Cum funcționează pageX și pageY:
dacă ai o fereastră de 1000 pe 1000
pixeli, iar cursorul este în centru, atunci
pageX și pageY vor fi egale cu 500. Dacă
derulezi apoi pagina cu 250
pixeli în jos, atunci pageY va deveni egal cu 750.
Astfel pageX și pageY conțin coordonatele
evenimentului luând în considerare derularea.
Sintaxă
event.pageX;
Exemplu
La mișcarea mouse-ului pe pagină vom afișa
coordonatele sale relative la fereastra browser-ului
(pageX și pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
