Javascript - 绑定(bind)到另一个元素后面的元素？

Question

假设我有两个 div:

<div id="container1"></div>
<div id="container2"></div>

并假设两个 div 具有相同的宽度和高度，并且彼此重叠，其中 #container2 位于另一个之上(即 #container2 的 >z-index 更高)。

是否绝对可以将鼠标绑定(bind)到下面的元素(#container1)？

我问这个问题是因为在我的情况下，#container2 部分阻止了 #container1 的部分内容；所以在没有重叠的地方，我的绑定(bind)没有问题，但是当有重叠时，我就无法绑定(bind)

编辑具体来说，#container1 是时间线，#container2 是从上午 9:00 开始到 12:00 的特定任务。我希望能够将任务拖到不同的时间。所以我想绑定(bind)到时间线 (#container1)。

Answer 1

您可以将 pointer-events:none 添加到元素。

Example Here - 尝试突出显示文本，您可以浏览该元素。

#container2 {
    z-index:2;
    pointer-events:none;
}

只需输入 property's support考虑在内。