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

让我们看看这个代码：

<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;
}

舱外集装箱
{
位置：相对位置；
宽度：200px；
高度：200px；
背景颜色：绿色；
}
分区#内部(儿童)1
{
位置：绝对位置；
z指数：1
排名：0；
左：0；
右：0；
底部：0；
背景色：红色；
}
分区#内部(儿童)2
{
位置：绝对位置；
z指数：2
排名：0；
左：0；
右：0；
底部：0；
背景颜色：蓝色；
}

例如，当我们单击顶层内部子容器2时，事件将传播到所有注册到内部子容器2及其父外部容器的事件处理程序。不到内部子级1，尽管它位于内部子级2的正下方。这是按规定的。所有现代浏览器都会这样做

我的问题是：

除了使内部子事件不可见或更改其z索引外，如何使事件通过内部子事件2到达内部子事件1？ （或透明，但这仅适用于IE8）

我考虑过自己在注册到internal_child_2的处理程序代码中触发一个事件。但在实际的使用案例中，我不知道将事件分派到哪里，如下面的Internal_child_2所示，有多个元素以不可预测的方式排列，我希望每个元素都接收事件，就像Internal_child_2不在那里一样。理想情况下，我希望能够有选择地让一些事件过去，而不让其他事件发生

---

我知道这是一个很难回答的问题，但我会很感激任何建议

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

---

在父容器中，您将处理

click

事件，然后遍历其子容器，并将单击的坐标与每个子容器的相对边界进行比较。如果点击在范围内，点击应该在那里触发，因此手动触发该孩子的

点击
事件。
当然，我必须评估孩子的可见状态、z索引以及其他有趣的东西。我怎么知道孩子是否注册了适当类型的事件处理程序？我认为如果孩子的事件没有注册，它将被忽略。您不想处理不考虑z索引的问题吗？最后，您必须检查可见状态，但这应该不会太糟糕。谢谢。我希望有一个解决方案，不包括重新实现一半的浏览器：）也许没有？我将不得不进行更多的研究，但比较坐标和边界的部分似乎非常复杂。