Уласцівасць event.clientX
Уласцівасць event.clientX ўтрымлівае ў
сабе каардынаты курсора мышы па восі X.
Для вызначэння каардынат ёсць таксама ўласцівасці
event.clientY,
event.pageX,
event.pageY.
Давайце паглядзім розніцу паміж clientX/clientY
і pageX/pageY.
Як працуюць clientX і clientY:
калі ў вас ёсць акно 1000 на 1000
пікселяў, і мыш знаходзіцца ў цэнтры, то clientX
і clientY будуць абодва роўныя 500. Калі
вы затым пракруціце старонку па гарызанталі
ці вертыкалі, не рухаючы курсор, то значэнні
clientX і clientY не зменяцца, так як адлічваюцца
aдносна акна, а не дакумента.
Як працуюць 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;
});
:
