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