reactjs - 在 React 组件中获取鼠标位置的正确方法是什么？

Question

我有一个呈现 Canvas 元素的组件。我有一个 onMouseMove 处理程序，但是当我将鼠标移向元素顶部时 event.clientY 打印 86。为什么不是 0？是否有一个综合事件属性会给我相对于元素坐标系而不是窗口的点？

Answer 1

您可以使用目标 offsetTop 通过从 clientY 中减去来获取相对位置，例如

event.clientY - event.target.offsetTop

可以看例子

class App extends React.Component{
  render(){
    return(
      <div>
        <div>Top Component</div>
        <div className="main" onMouseMove={(e) => console.log(e.clientY - e.target.offsetTop)}>Main Component</div>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById("root"));

div{
  min-height: 50px;
}

div.main{
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>