如何使事件通过可见的DOM元素

Question

让我们有这个代码：

<div id="outer_container">
  <div id="inner_child_1"></div>
  <div id="inner_child_2"></div>
</div>

div#outer_container
{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: green;
}

div#inner_child_1
{
  position: absolute;
  z-index: 1
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
}

div#inner_child_2
{
  position: absolute;
  z-index: 2
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: blue;
}

例如，当我们在顶层inner_child_2 上单击时，该事件将传播到所有注册到inner_child_2 及其父outer_container 的事件处理程序。不是inner_child_1，尽管它位于inner_child_2 的正下方。这是按规范。所有现代浏览器都这样做。

我的问题是这样的：

除了使inner_child_1不可见或更改其z-index之外，如何使事件通过inner_child_2并到达inner_child_1？ （或者是透明的，不过这只适用于IE8）

我考虑过在一些注册到 inner_child_2 的处理程序代码中自己触发一个事件。但在实际使用案例中，我不知道在哪里调度事件，如下图 inner_child_2，有多个元素以不可预知的方式布局，我希望每个元素都接收事件，就好像 inner_child_2 不存在一样。理想情况下，我希望能够有选择地让某些事件通过，而将其他事件排除在外。

我知道这是一个困难的问题，但我会感谢任何建议

Answer 1

一种方法是采用自下而上的方法：

在父容器中，您将处理click 事件，然后遍历其子容器并将点击的坐标与每个子容器的相对边界进行比较。如果点击在范围内，则应该在此处触发点击，因此请手动触发该子级的 click 事件。