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

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

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

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

常量元素=document.getElementByIdwrapper； 常量输出=document.getElementByIdoutput； element.addEventListenerwheel，事件=>{ output.innerHTML=`offsetX:${event.offsetX}，offsetY:${event.offsetY}`； }; 包装纸{ 高度：300px； 宽度：500px； 背景：ccc； 位置：绝对位置； 左：400px； 顶部：20px； } 孩子{ 位置：相对位置； 高度：120px； 宽度：130px； 左：50px； 顶部：120px； 背景：绿色； }

---

欢迎来到堆栈溢出

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

pointer-events: none;

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

您可以在此处找到更多信息：

您可以使用以下功能：

---

获取元素的位置，然后这是一个简单的操作。

我找到了一个我并不喜欢的解决方案。函数getBoundingClientRect

常量元素=document.getElementByIdwrapper； 常量输出=document.getElementByIdoutput； element.addEventListenerwheel，事件=>{ 设{x，y}=element.getBoundingClientRect； 设位置={x，y}； 让mousex=event.clientX-position.x； 让mousey=event.clientY-position.y； output.innerHTML=`offsetX:${mousex}，offsetY:${mousey}`； }; 包装纸{ 高度：300px； 宽度：500px； 背景：ccc； 位置：绝对位置； 左：400px； 顶部：20px； } 孩子{ 位置：相对位置； 高度：120px； 宽度：130px； 左：50px； 顶部：120px； 背景：绿色； }

---

谢谢你的回答，但不幸的是，我必须能够在我的子元素中使用不同的鼠标事件。比如“点击”-eventYeah+1。这是我自己找到的解决办法。