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