重叠元素中的 onClick 事件传播答案

【问题标题】：onClick event propagation in overlapping elements重叠元素中的 onClick 事件传播
【发布时间】：2020-12-17 05:27:09
【问题描述】：

我有两个绝对定位的divs，它们重叠，每个都有一个onClick 处理程序。我需要onClick 处理程序为每个元素触发，但它只发生在最上面的那个。我正在使用 React 17。

示例代码：

<div style={{ position: "absolute" }}>
  <div
    style={{
      position: "absolute",
      left: 0,
      top: 0,
      height: 100,
      width: 100,
      backgroundColor: "rgba(0, 200, 200, 0.2)",
    }}
    onClick={() => console.log("first")}
  />
  <div
    style={{
      position: "absolute",
      left: 50,
      top: 50,
      height: 100,
      width: 100,
      backgroundColor: "rgba(200, 200, 0, 0.2)",
    }}
    onClick={() => console.log("second")}
  />
</div>

渲染：

单击非重叠部分将'first' 或'second' 记录到控制台，但单击重叠部分仅记录'second'。

如何将事件也传播到后面的元素？

（这几乎可以肯定是重复的，但经过大量搜索后，我没有找到任何类似的问题。）

【问题讨论】：

您希望 onclick 作用于重叠部分还是整个部分？
@MohammadFaisal 我希望两个处理程序只在重叠部分触发
考虑到我们的浏览器画布是二维的，这怎么可能？
对不起，但我不明白这个问题：浏览器知道这两个元素都在被点击的坐标下呈现。这就是它知道混合背景颜色的方式。
好吧，告诉我一件事。当有人点击重叠的地方时，您希望触发哪个元素？因为从技术上讲，它们都在那里。你想让它们都被触发吗？

标签： javascript html reactjs typescript

【解决方案1】：

我想出了一些办法来解决我遇到的问题，尽管它在技术上并没有实现所述问题。我真的只需要一个元素来接收事件，但有时那是后面的。

我将预期目标的z-index; 提高了一个高值，以便它位于顶部并接收点击。这只是一个问题，因为我使用的是透明元素。

【讨论】：