Својството 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;
});
:
