event.clientX property
The event.clientX property contains
the coordinates of the mouse cursor along
the X axis. To determine the coordinates,
there are also
event.clientY,
event.pageX,
event.pageY
properties. Let's see the difference
between clientX/clientY and
pageX/pageY.
How clientX and clientY work: if
you have a 1000 by 1000 pixels
window and the mouse is in the center, then
clientX and clientY will both
be equal to 500. If you then scroll
the page horizontally or vertically without
moving the cursor, the values clientX
and clientY will not change because
they are relative to the window, not the document.
How pageX and pageY work: if you
have a 1000 by 1000 pixels window
and the cursor is in the center, then pageX and
pageY will be equal to 500. If you
then scroll the page 250 pixels down, then
pageY becomes 750. Thus pageX
and pageY contain the coordinates of
the event, taking scrolling into account.
Syntax
event.clientX;
Example
When moving the mouse on the page, we
will display its coordinates relative
to the browser window
(clientX and clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
