logo标签列表

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

javascripthtmlcssonclickz-index
6

我有一个“层”，我想给它添加一个onclick事件。关键是，当上面的层上的元素被点击时，我不希望执行该操作。

我该如何实现这个功能？

5个回答
8
你遇到的问题是由事件在DOM树中向上传播的方式引起的。当你点击页面上的一个元素时，该元素的点击处理程序将有机会响应点击。除非处理程序停止事件传播，否则该元素的父级将有机会处理事件，以此类推，直到达到根元素。
这种行为通常感觉很自然，并且每个在点击元素“后面”的元素都有机会响应事件。然而，当使用绝对定位时，你可以将一个元素放在另一个不是其祖先的元素前面。此时，事件传播可能会令人困惑。只有被点击元素的祖先才会接收到点击事件，意味着它后面的元素可能无法接收到。
我创建了一个jsfiddle - http://jsfiddle.net/HUGNd/ - 来说明这种情况。
一种快速解决方法是确保要响应点击事件的元素是被点击元素的祖先。否则，无论调用哪个元素的事件处理程序，你都可以在javascript中实现所需的结果。
6

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

1

我有点困惑，我认为这会自然地通过浏览器发生。从我了解的情况来看，您正在尝试做这样的事情：

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

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

0

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

        targetDiv.onclick = (e) => {
            if ((e.target) == targetDiv) {
              alert('correct target');
            }
        }
0
你可以使用以下CSS属性来取消该元素上的所有指针事件：
.element {
    pointer-events: none;
}

此属性将禁用该元素上的所有事件，如悬停、点击、聚焦等。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接