鼠标相对于事件处理程序中 React 中的当前目标的坐标

Question

我有一个捕获onWheel鼠标事件的外部div。在处理程序中，我想知道鼠标指针相对于外部div的坐标。例如：

constructor() {
  this.handleWheel = this.handleWheel.bind(this);
}
handleWheel(event) {
  // how do I get mouse position relative to the outer div here?
}
render() {
  return (
    <div onWheel={this.handleWheel}>
      ...
      <img src="..." />
      ...
    </div>
  )
}

当我将鼠标指针移到图像上并滚动鼠标滚轮时，event.target设置为 <img>，event.currentTarget设置为 <div> 。我还可以获取鼠标相对于event.target的位置(event.nativeEvent.offsetX/Y(，但这对我没有帮助，因为我不知道<img>相对于<div>的位置。

换句话说，我被困住了...如何获取相对于附加了处理程序的元素的鼠标位置？

Answer 1

我找到了一个有效的解决方案，如果它对某人有帮助，我会在这里发布它。我不确定它是否是最好的，所以我将不胜感激一些评论(可能还有更好的解决方案(。

handleWheel(event) {
  let currentTargetRect = event.currentTarget.getBoundingClientRect();
  const event_offsetX = event.pageX - currentTargetRect.left,
        event_offsetY = event.pageY - currentTargetRect.top;
  //...
}