如何将div位置传递给子元素

Question

我正在尝试将点击位置传递给div的子元素。在以下示例中，我试图将my-div的顶部和左侧坐标传递给handleClick()函数：

<div id="my-div">
    <div onclick={() => this.handleClick(this.offsetX, this.offsetY)} />

offsetX / y是我的猜测，但这似乎不起作用。是否可以获取 parent 项的坐标并将其传递给child元素的函数？

Answer 1

您可以尝试这样做：

处理点击的功能：

 handleClick = e => {
    var rect = e.target.parentElement.getBoundingClientRect();
    console.log(rect);
 };

您想要获取坐标的元素：

  <div id="parent">
      <div id="child" onClick={e => this.handleClick(e)}>
        try this
      </div>
   </div>

rect将是一个对象，其中包含相对于文档的坐标以及您单击的div的父级的尺寸。

然后您可以根据需要使用它们。