Find mouse position relative to element

javascript

event-listeners

mouse-position

css-transforms

byAlex Kataev·Sep 27, 2024

To get the relative mouse position, apply getBoundingClientRect() to get the offset position. Then obtain event.clientX/Y and subtract the element's rect.left/top.

element.addEventListener('mousemove', (e) => {
  const rect = element.getBoundingClientRect();
  console.log(`Mouse: x=${e.clientX - rect.left}, y=${e.clientY - rect.top}`);
});

Focus on e.clientX - rect.left and e.clientY - rect.top for obtaining the mouse coordinates.

Border control

CSS margins and borders can influence position calculation. Remember to account for them.

element.addEventListener('mousemove', (e) => {
  const rect = element.getBoundingClientRect();
  const computedStyle = getComputedStyle(element);
  const borderLeftWidth = parseInt(computedStyle.borderLeftWidth, 10);
  const borderTopWidth = parseInt(computedStyle.borderTopWidth, 10);

  // Borders can play hide and seek! Find them.
  console.log(`Mouse: x=${e.clientX - rect.left - borderLeftWidth}, y=${e.clientY - rect.top - borderTopWidth}`);
});

Consider the border size to assure accurate mouse position.

Keeping up with the scroll

A scroll offset may affect the element's relative position, so we should also account for it.

element.addEventListener('mousemove', (e) => {
  const rect = element.getBoundingClientRect();
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // Scroll offset, making calculations roll!
  console.log(`Mouse: x=${e.clientX - rect.left + scrollLeft}, y=${e.clientY - rect.top + scrollTop}`);
});

Better keep an eye on page scrolling when capturing the mouse position.

Pointing through child elements

If your element contains child elements with pointer events enabled, apply pointer-events: none; to them.

.child-element {
  pointer-events: none;
}

This helps ensure child elements transparency for uninterrupted mouse position tracking.

The fear of the Matrix (Transformed elements)

For elements within transformed containers, your calculations might have to confront the fearsome CSS transforms.

// This is some Neo level stuff! Re-calibrate for transformation.
element.addEventListener('mousemove', (e) => {
  const rect = element.getBoundingClientRect();
  // Assume scale transform applied on the container
  const scaleX = 1; // Replace with actual scale factor
  const scaleY = 1; // Replace with actual scale factor

  console.log(`Mouse: x=${(e.clientX - rect.left) / scaleX}, y=${(e.clientY - rect.top) / scaleY}`);
});

Hey, take a breath and recalibrate. Adapt for any CSS transformation applied to parent elements.

Motion tracking

To get a read on continuous mouse movement, bind to the mousemove event.

element.addEventListener('mousemove', (e) => {
  // Continue tracking like the Mission Impossible you are.
});

Implement real-time mouse tracking to impress Ethan Hunt.

Thinking ahead

Performance is key, especially when handling frequency intensive events like mousemove.

let rect = element.getBoundingClientRect(); // Less talk, more work!
element.addEventListener('mousemove', (e) => {
  // Use rect without calling getBoundingClientRect again
});

Minimise repetitive calls and cache element's offset properties for those sweet sweet performance gains.

Nested dilemma?

Don't be intimidated by nested elements. Just calculate their offsets iteratively.

let offsetTop = 0;
let offsetLeft = 0;
let currentElement = element;

// Unravel the offset mystery
while (currentElement) {
  offsetTop += currentElement.offsetTop;
  offsetLeft += currentElement.offsetLeft;
  currentElement = currentElement.offsetParent;
}

Nested elements? Just one more fun challenge to overcome!

Mind the edge cases

Building applications often is like walking a minefield. You may encounter these situations:

Touch screen devices: Mouse events? Nope. Utilize touch events or pointer events.
Device pixel ration: Deploy window.devicePixelRatio for those 4K display users.
Walking the cross-browser tightrope: Edge cases are everywhere. Test across multiple browsers and devices.
Performance Issues: Remember to attach and detach event listeners judiciously and maybe throttle/debounce frequent events.