获取鼠标相对于 React 中任意 Dom 元素的 X 和 Y 坐标

Question

我正在寻找在事件onmousemove、onmouseup和onmousedown期间根据某些任意 DOM 元素检索鼠标的 X 和 Y 坐标的最可靠方法。

在编写普通的javascript时，我可以使用e.layerX和e.layerY来获得一个看起来正确的数字。 不过，在Mozilla文档中，他们建议不要使用它。 现在转到 React，(在我的特定组件渲染函数中)

return <canvas onMouseMove={ e => this.handleMouseMoved(e) }></canvas>.

我不再有权访问layerX或layerY。 我也无法访问过去与clientX或clientY结合使用来推导出鼠标元素相对坐标的offsetX。

有许多不同的方法来读取坐标。 我对它们的含义以及何时应该使用它们感到困惑。 因此，如果我想在将鼠标悬停在左上角时看到x: 0, y: 0，x: <DomElement.width>, y: <DomElement.height将鼠标悬停在右下角时查看，我应该查看哪个事件/合成事件？

Answer 1

React 使用 SyntheticEvents 然后"池化"这些事件以提高性能 (https://facebook.github.io/react/docs/events.html#event-pooling)

要获得"本机"事件，必须将其从合成事件中保存，因为 React 的 SyntheticEvent "将被重用，并且在调用事件回调后所有属性都将无效"。

那是什么意思？

<canvas onMouseMove={ e => { 
let nativeEvent = e.nativeEvent;
this.handleMouseMoved(nativeEvent); 
}></canvas>

nativeEvent将有您正在寻找的offsetX/Y、layerX/Y等。