javascript - 使较高的 z-index 元素禁用较低元素的 onclick

Question

我有一个“图层”，我想点击它。诀窍是我希望上面层上的元素在单击时不执行该操作。

我怎样才能做到这一点？

Answer 1

您遇到的问题是由事件通过 DOM 树向上传播的方式引起的。当您单击页面上的某个元素时，该元素的单击处理程序将有机会响应该单击。除非处理程序停止事件传播，否则父元素将有机会处理事件，依此类推，直到到达根元素。

这种行为通常感觉很自然，被点击元素“后面”的每个元素都有机会响应该事件。但是，当您使用绝对定位时，您可以将一个元素放在另一个元素的前面，而这个元素在 dom 树中不是它的祖先。此时事件传播可能会令人困惑。只有被点击的元素祖先会收到点击事件，这意味着它后面的元素可能不会。

我创建了一个 jsfiddle - http://jsfiddle.net/HUGNd/ - 来说明这种情况。

修复它的一种快速方法是确保您要响应点击事件的元素是被点击元素的祖先。否则，无论调用哪个元素的事件处理程序，您都可能在 javascript 中获得所需的结果。