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

javascriptevent.clientX;

Przykład

Podczas ruchu myszą po stronie będziemy wyświetlać jej współrzędne względem okna przeglądarki (clientX i clientY):

html<div id="elem">0 : 0</div>

javascriptlet elem = document.getElementById('elem');

document.addEventListener('mousemove', function(event) {
  elem.innerHTML = event.clientX + ' : ' + event.clientY;
});

Результат:

Zobacz też