How to Get the Current Mouse Position in JavaScript

Last updated on January 28, 2023

To get the current position of the mouse in JavaScript, add a mousemove event listener to the window object and access the clientX and clientY properties of the MouseEvent object in the listener to get the X and Y coordinates of the mouse respectively.

For example:

<p>
  Mouse pos: <b><span id="mouse-pos"></span></b>
</p>

const mousePosText = document.getElementById('mouse-pos');
let mousePos = { x: undefined, y: undefined };

window.addEventListener('mousemove', (event) => {
  mousePos = { x: event.clientX, y: event.clientY };
  mousePosText.textContent = `(${mousePos.x}, ${mousePos.y})`;
});

The current mouse position is shown.

The mousemove event is triggered on an element when the mouse hovers it. To be more precise, it is fired when the mouse is moved and the cursor's hotspot is within the element's bounds.

We attach the event listener to the window object to trigger the event whenever the mouse has moved anywhere on the page.

The mousemove event listener receives a MouseEvent object used to access information and perform actions related to the event. We use the clientX and clientY properties of this object to get the position of the mouse on the X-coordinate and Y-coordinate respectively in the application's viewport.

Get current mouse position relative to element in React

In the first example, we get the current mouse position in global coordinates. In global coordinates, position (0, 0) is at the top-left of the webpage and position (Xmax, Ymin) is at the bottom right.

We might instead want to get the mouse position within the region of an element.

To get the current mouse position relative to an element, set a mousemove event handler on the element, then calculate the local X and Y positions using properties of the MouseEvent object passed to the event handler.

For example:

<div>
  <div class="local">
    Local
    <br />
    <b><span id="local-mouse-pos"></span></b>
  </div>
  <p>
    Global
    <br />
    <b><span id="global-mouse-pos"></span></b>
  </p>
</div>

.local {
  border: 1px solid #c0c0c0;
  padding: 75px;
  text-align: center;
  display: inline-block;
  margin-left: 100px;
  margin-top: 100px;
}

const globalMousePosText = document.getElementById('global-mouse-pos');
const localMousePosText = document.getElementById('local-mouse-pos');

let localMousePos = { x: undefined, y: undefined };
let globalMousePos = { x: undefined, y: undefined };

window.addEventListener('mousemove', (event) => {
  const localX = event.clientX - event.target.offsetLeft;
  const localY = event.clientY - event.target.offsetTop;
  localMousePos = { x: localX, y: localY };
  
  globalMousePos = { x: event.clientX, y: event.clientY };

  globalMousePosText.textContent = `(${globalMousePos.x}, ${globalMousePos.y})`;
  localMousePosText.textContent = `(${localMousePos.x}, ${localMousePos.y})`;
});

Now the resulting X and Y coordinates will be relative to the element. For example, position (0, 0) will be at the top left of the element, not the viewport:

The current mouse position relative to the element is shown.

We subtract the offsetLeft property of the element from the clientX property of the MouseEvent object to get the position on the X-axis relative to the element.

Similarly, to get the position on the Y-axis, we subtract the offsetTop property from the clientY property of the MouseEvent object.

window.addEventListener('mousemove', (event) => {
  const localX = event.clientX - event.target.offsetLeft;
  const localY = event.clientY - event.target.offsetTop;
  localMousePos = { x: localX, y: localY };
  // ...
});

The offsetLeft property returns the number of pixels between the left position of an element and its parent.

Likewise, the offsetTop property returns the number of pixels between the top position of an element and its parent.

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

How to Get the Current Mouse Position in JavaScript

Get current mouse position relative to element in React

Try Coding Beauty AI Assistant for VS Code

See also