Својство 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 садрже координате догађаја узевши у обзир скроловање.

Синтакса

javascriptevent.pageX;

Пример

При кретању миша по страници приказиваћемо његове координате у односу на прозор прегледача (pageX и pageY):

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

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

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

Результат:

Видите такође