Question

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

我怎样才能实现这一目标？

谢谢！

Answer 1

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

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

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

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

Answer 2

调用event.stopPropagation()以防止“冒泡”。或者，如上所述，更改绝对定位元素的父母关系。

Answer 3

我有点困惑，我认为这会通过浏览器自然发生。从我收集的内容中你试图做这样的事情：

<html>
  <body>
    <div id="block" style="position:absolute; top:0; left:0; width:200px; height:200px; background-color:red;" onclick="alert('clicked');"></div>
    <div id="block" style="position:absolute; top:0; left:0; width:100px; height:100px; background-color:blue;"></div>
  </body>
</html>

[不是真的答案，但考虑到我想发布代码，我觉得评论不合适]

Answer 4

您可以将事件触发器减少到所需的目标。

        targetDiv.onclick = (e) => {
            if ((e.target) == targetDiv) {
              alert('correct target');
            }
        }

使更高的z-index元素禁用下部元素的onclick

4 个答案: