獲取鼠標的X座標和Y座標相對於React中的任意Dom元素

Question

我正在尋找最可靠的方法來檢索鼠標的某些任意DOM元素的X和Y座標，在事件onmousemove ，onmouseup和onmousedown。

在編寫香草javascript時，我可以用e.layerX和e.layerY來得到一個看似正確的數字。儘管在Mozilla文檔中，他們推薦使用against using it。現在轉到React（在我的特定組件渲染功能中）

return <canvas onMouseMove={ e => this.handleMouseMoved(e) }></canvas>。我不再使用layerX或layerY。我也不能訪問offsetX，在過去我已經使用clientX或clientY來導出鼠標的元素相對座標。

有很多不同的方法來讀取座標。我對它們的含義以及何時應該使用它們感到困惑。因此，如果我想將鼠標懸停在左上角時看到x: 0, y: 0，並且當我將鼠標懸停在右下角時，我應該看到哪個事件/合成事件？

Answer 1

陣營使用SyntheticEvents，然後在「池」這些事件來提高性能（https://facebook.github.io/react/docs/events.html#event-pooling）

獲得「原生」事件，必須從合成事件被保存，因爲陣營的SyntheticEvent「將被重用，所有屬性將在事件回調被調用後被取消「。

這是什麼意思？

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

的nativeEvent將有offsetX/Y，layerX/Y等你正在尋找。