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及其父external_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事件。

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

1 个答案: