javascript - JavaScript - div 的顺序，其中顶部的一个不受来自下面 div 的 onclick 脚本的影响

Question

我有三个相互堆叠的 div 框，因此一个比背景 div 更近。但是背景 div 有这个事件处理程序： onclick="hideLarge();"

问题是，当我单击前面的 div 框时，即使它阻止了背景 div 的可见性，它仍然会触发我不希望它执行的 onclick 功能。

有没有办法让前面的 div 框拦截这些？

谢谢！

score 2 · Accepted Answer

如果你的 DOM 结构是这样的：

Document
 |- BODY
     |- DIV(#1)
         |- DIV(#2)
         |- DIV(#3)
             |- DIV(#4)
             |- DIV(#5)

然后点击#4，#5 会冒泡到#3 和#1，而点击#3 和#2 会冒泡到#1。

另一方面，如果您有这样的结构：

Document
 |- BODY
     |- DIV(#1)
     |- DIV(#2)
     |- DIV(#3)
     |- DIV(#4)
     |- DIV(#5)

所有的 div 都不会跳到 document.body 和 document 之外。

您可以使用event.stopPropagation()来阻止事件冒泡。假设我们在示例 1 中的 #5 上绑定了一个点击监听器：

div5.addEventListener('click', function(event) {
    event.stopPropagation();
}, false);

事件将在到达 div #3 之前停止，因此也不会到达 #1。

如果您在#5 上绑定了多次单击事件，这些将不会停止。如果你想停止这些你应该使用event.stopImmediatePropagation()

请注意，某些版本的 IE 有不同的执行方式。

score 1 · Accepted Answer

检查点击的div是否为背景div，这里top div是top 1的div的id

function hideLarge(evt) {
if(evt.target.id!='top_div'){
//code
}

2 回答 2