Właściwość event.clientX
Właściwość event.clientX zawiera
współrzędne kursora myszy wzdłuż osi X.
Do określenia współrzędnych istnieją również właściwości
event.clientY,
event.pageX,
event.pageY.
Przyjrzyjmy się różnicy między clientX/clientY
a pageX/pageY.
Jak działają clientX i clientY:
jeśli masz okno o wymiarach 1000 na 1000
pikseli, a mysz znajduje się w środku, to clientX
i clientY będą wynosić 500. Jeśli
następnie przewiniesz stronę w poziomie
lub w pionie, nie ruszając kursora, wartości
clientX i clientY nie zmienią się, ponieważ są liczone
względem okna, a nie dokumentu.
Jak działają pageX i pageY:
jeśli masz okno o wymiarach 1000 na 1000
pikseli, a kursor znajduje się w środku, to
pageX i pageY będą wynosić 500. Jeśli
następnie przewiniesz stronę o 250
pikseli w dół, to pageY stanie się równe 750.
Zatem pageX i pageY zawierają współrzędne
zdarzenia uwzględniające przewijanie.
Składnia
event.clientX;
Przykład
Podczas ruchu myszą po stronie będziemy wyświetlać
jej współrzędne względem okna przeglądarki
(clientX i clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
