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

Question

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

我怎样才能做到这一点？

谢谢！

Answer 1

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

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

我创建了一个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 个解决方案

解决方案1
6 2011-03-19 19:11:13

解决方案2
4 已采纳 2011-03-19 19:22:34

解决方案3
1 2011-03-19 19:07:10

解决方案4
0 2018-03-23 11:53:59

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

问题描述

4 个解决方案

解决方案1 6 2011-03-19 19:11:13

解决方案2 4 已采纳 2011-03-19 19:22:34

解决方案3 1 2011-03-19 19:07:10

解决方案4 0 2018-03-23 11:53:59

解决方案1
6 2011-03-19 19:11:13

解决方案2
4 已采纳 2011-03-19 19:22:34

解决方案3
1 2011-03-19 19:07:10

解决方案4
0 2018-03-23 11:53:59