获取光标相对于元素的位置，忽略子元素

Question

我试图获取光标的位置，忽略页面上的所有其他元素（包括那些具有自己的事件侦听器的元素）。

我知道你可以这样获取光标的位置：

const parallax = document.querySelectorAll(".parallax").forEach((parallax) => {
   const video = parallax.querySelector("video");

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

上面将获取鼠标光标相对于目标元素中心的位置。

但是，它还会获取相对于任何目标的 children 的光标位置，这不是我想要的。我希望它忽略所有孩子、兄弟姐妹和任何可能妨碍事件触发器的东西。 （有点像透明效果，类似于 css 中设置为

pointer-events: none

的元素的反应）

Answer 1

使用

currentTarget

(MDN docs) 而不是

target

可以让您引用事件侦听器所附加的元素，而不是触发事件的子元素。

document.getElementById('a').addEventListener('mousemove', (e) => {
  let x = e.offsetX - e.currentTarget.offsetWidth / 2
  let y = e.offsetY - e.currentTarget.offsetHeight / 2
  console.log(x, y)
})

#a {
  width: 500px;
  height: 200px;
  border: 2px solid #f00;
}

#b {
  width: 100px;
  height: 100px;
  border: 2px solid #00f;
  margin: 50px;
}

<div id="a">
  <div id="b"></div>
</div>