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>

Answer 2

event.clientY

将返回相对于窗口的位置，而不是父级。

尝试执行以下操作

event.pageY - event.target.offsetTop

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

2 个答案: