JavaScript clientX and clientY Coordinates

event.clientX and event.clientY give the horizontal and vertical position of a mouse event relative to the browser viewport. The top-left corner of the viewport is 0, 0.

element.addEventListener('click', (event) => {
  console.log(event.clientX, event.clientY);
});

DEMO of X & Y coordinates of mouse click

What clientX and clientY Measure Top ↑

clientX measures from the left edge of the viewport and clientY from the top edge. Scrolling the document does not turn these values into document coordinates; for document-relative positions, compare with pageX/pageY or add the page scroll offsets.

Complete Working Source Top ↑

<div id="d1" aria-live="polite"></div>
<div id="my_page2">**</div>
<script>
const output = document.getElementById('d1');
document.addEventListener('click', (event) => {
  output.textContent = `X: ${event.clientX}  Y: ${event.clientY}`;
});
</script>

Using coordinate and key-event ideas together, see the Virtual Keyboard tutorial.

Related Coordinate Properties Top ↑

screenX/screenY are relative to the screen, while offsetX/offsetY describe the position relative to the event target's padding edge. Choose the coordinate system that matches the task.

← Event Handling onMouseOver and onMouseOut →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: