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

Question

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

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

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

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>

标签： javascripthtmlmouseeventmousewheelmouse-position

Answer 1

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