Свойство 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 съдържат координатите на събитието, като се взема предвид превъртането.

Синтаксис

javascriptevent.clientX;

Пример

При движение на мишката по страницата ще извеждаме нейните координати спрямо прозореца на браузъра (clientX и clientY):

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

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

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

Результат:

Вижте също