时间戳

首页 > 解决方案 > 如何添加事件侦听器以确定单击 div 内的坐标？

javascript - 如何添加事件侦听器以确定单击 div 内的坐标？

问题描述

假设我有 200 像素 x 500 像素的 div 框。

目标是添加一个事件侦听器来确定单击的此 div 内的 x 和 y 坐标。

在 React 中怎么会这样呢？

标签： javascripthtmlreactjs

解决方案

您可以使用getBoundingClientRect()获取元素的位置，加上MouseEvent.clientX和MouseEvent.clientY获取点击坐标。

见演示：

function XYComponent() {
  const go = (e) => {
    const offsets = e.target.getBoundingClientRect();
    const y = e.clientY - offsets.top;
    const x = e.clientX - offsets.left;
    console.log(x, y);
  }
  return (
    <div>
      <div class="demo" onClick={go}>AAA</div>
      <div class="demo" onClick={go}>BBB</div>
    </div>
  )
}

ReactDOM.render(<XYComponent />, document.querySelector("#app"))
body {
  font-family: monospace;
}
.demo {
  border: 1px solid black;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

推荐阅读