Свойство event.pageX
Свойството event.pageX съдържа
координатите на курсора на мишката по оста X.
За определяне на координати също има свойства
event.clientX,
event.clientY,
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.pageX;
Пример
При движение на мишката по страницата ще извеждаме
нейните координати спрямо прозореца на браузъра
(pageX и pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
