在事件处理程序中React中相对于currentTarget的鼠标坐标

Question

我有一个外部 div 来捕获

onWheel

鼠标事件。在处理程序中，我想知道鼠标指针坐标相对于外部 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;
  //...
}

Answer 2

考虑页面滚动位置以及父元素的位置：

handleWheel(e) {
  let {offsetLeft: x, offsetTop: y} = e.currentTarget;
  let event_offsetX = e.pageX - x, event_offsetY = e.pageY - y;
  //...
}

在打字稿中使用这个：

handleWheel(e: WheelEvent) {
  let {offsetLeft: x, offsetTop: y} = (e.currentTarget as HTMLElement);
  let event_offsetX = e.pageX - x, event_offsetY = e.pageY - y;
  //...
}