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

Question

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

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

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

谢谢!

Answer 1

如果你的 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)

除 document.body 和 document 之外，所有 div 都不会跳动。

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

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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener