Get cursor position relative to element, ignoring children

37 views Asked by At

I'm trying to get the position of my cursor ignoring all other elements on my page (including those with event listeners of their own).

I know you can get the position of the cursor like this:

const parallax = document.querySelectorAll(".parallax").forEach((parallax) => {
   document.addEventListener("mousemove", (e) => {
      let x = e.offsetX - parallax.innerWidth / 2;
      let y = e.offsetY - parallax.innerHeight / 2;
   });
});

The above will get the mouse cursor position relative to the center of the target element.

How ever, it will also get the cursor position relative to any of the target's children, which isn't what I want. I'd like it to ignore all children, siblings and anything that may be in the way of the event trigger. (sort of like a transparent effect, similar to how an element set to pointer-events: none in css would react)

0

There are 0 answers