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

Question

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

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

如果我的鼠标悬停在子元素上，它会给出子元素的位置。我知道 event.pageX 或 event.clientX 但它给了我相对于 window/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

欢迎来到 Stack Overflow！

如果您将此 CSS 属性设置为您的子元素：

pointer-events: none;

滚轮位置将始终相对于父元素，但请记住它会禁用与子元素的所有鼠标交互。

您可以在此处找到更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 2

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

Answer 3

我找到了一个我不太喜欢的解决方案。函数 getBoundingClientRect ().

const element = document.getElementById("wrapper");
const output = document.getElementById("output");
element.addEventListener("wheel", event =>{
   let { x, y } = element.getBoundingClientRect();
   let position = { x, y };
   let mousex = event.clientX - position.x;
   let mousey = event.clientY - position.y;
output.innerHTML = `offsetX: ${mousex}, offsetY: ${mousey}`;
});

#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>

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

Is it possible to get the mouse position only relative to your element

html

javascript

mouseevent

mousewheel

mouse-position