Quick solution: getting the mouse position on an element regardless of positioning

As I was upgrading an older codebase of mine that used layerX and layerY I looked into a very succinct way of finding the current mouse position on any element regardless of its position, scrolling, padding, margin and such and I found this to work for me, so maybe it is good for you, too.

const getposition = ev => {
  let x = ev.clientX;
  let y = ev.clientY;
  let pos = ev.target.getBoundingClientRect();
  // the bitwise shift |0 rounds non-integer values down.
  // if you want to round up, use 1.
  return {
    x: x - pos.x|0,
    y: y - pos.y|0
  };
}

Here’s a codepen of it in action, and you can play with it and give it more annoying things to deal with.

See the Pen
Get mouse position on element. by Christian Heilmann (@codepo8)
on CodePen.