Get exact relative mouse position X Y

javascript, jquery, mouseevent, mousemove

Solution

More examples here: show-popup-on-mouse-location

Mouse coordinates within element

The most accurate way to get the mouse coordinates within an element (without scrollbars) relative to viewport is by calculating the difference between

- MouseEvent.clientX, MouseEvent.clientY and

- Element.getBoundingClientRect()

const getMousePos = (evt) => {
  const pos = evt.currentTarget.getBoundingClientRect();
  return {
    x: evt.clientX - pos.left,
    y: evt.clientY - pos.top
  };
};

document.querySelector("#target").addEventListener('mousemove', (evt) => {
  const mPos = getMousePos(evt);
  evt.currentTarget.textContent = `Mouse position x:${mPos.x}  y:${mPos.y}`;
});

#target {
  position: absolute;
  left: 50px;
  top: 20px;
  width: 200px;
  height: 100px;
  background: #0bf;
  transform: translate(20px, 30px); /* works even with translate */
}

<div id="target"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Subtracting those values you can retrieve the exact mouse position, x:0, y:0 being the upper left corner of your element. Even if an element is CSS-transformed, i.e: `transform: translate(-50%, -50%)`, the returned values are still correct.

Problem

Original source

Related problems

• Show popup on mouse location