Свойство event.clientX
Свойството event.clientX съдържа
координатите на мишката по оста X.
За определяне на координати съществуват също свойствата
event.clientY,
event.pageX,
event.pageY.
Нека разгледаме разликата между clientX/clientY
и pageX/pageY.
Как работят clientX и clientY:
ако имате прозорец с размери 1000 на 1000
пиксела и мишката е в центъра, то clientX
и clientY и двете ще бъдат равни на 500. Ако
след това превъртите страницата хоризонтално
или вертикално, без да местите курсора, стойностите
на clientX и clientY няма да се променят, тъй като се отчитат
спрямо прозореца, а не документа.
Как работят pageX и pageY:
ако имате прозорец с размери 1000 на 1000
пиксела и курсорът е в центъра, то
pageX и pageY ще бъдат равни на 500. Ако
след това превъртите страницата с 250
пиксела надолу, то pageY ще стане равно на 750.
По този начин pageX и pageY съдържат координатите
на събитието, като се взема предвид превъртането.
Синтаксис
event.clientX;
Пример
При движение на мишката по страницата ще извеждаме
нейните координати спрямо прозореца на браузъра
(clientX и clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
