How to Get the Current Mouse Position in JavaScript

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:

HTMLCopied!

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

JavaScriptCopied!

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 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:

HTMLCopied!

<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>

CSSCopied!

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

JavaScriptCopied!

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:

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.

JavaScriptCopied!

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.

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.