Свойство event.clientX в JavaScript

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