javascript - 是否可以获取仅相对于您的元素的鼠标位置

Question

如果给定元素中有多个子元素，我很难获取相对于元素附加事件的鼠标位置。

domElement.addEventListener('wheel', event => {
 event.offsetX //x relative to target element
 event.offsetY //y relative to target element
}

如果我的鼠标悬停在子元素上，它会给出子元素的位置。我知道 event.pageX 或 event.clientX 但它为我提供了相对于窗口/视口(viewport)的鼠标位置。

const element = document.getElementById("wrapper");
const output = document.getElementById("output");
element.addEventListener("wheel", event =>{
output.innerHTML = `offsetX: ${event.offsetX}, offsetY: ${event.offsetY}`;
});

#wrapper{
  height:300px;
  width:500px;
  background:#ccc;
  position:absolute;
  left:400px;
  top:20px;
}

#child{
  position:relative;
  height:120px;
  width:130px;
  left:50px;
  top:120px;
  background: green;
}

<div id="wrapper">
  <div id="child">
  </div>
</div>

<div id="output"></div>

Answer 1

您可以使用这个:https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect 获取元素的位置，然后就是一个简单的操作。