Javascript event.stopPropagation（）不起作用-捕获仍然传递函数

首先，我是个笨蛋。对不起，如果这个问题足够基本的话。 第二，我尝试搜索，正如我所见，我按照其他帖子中的说明应用了解决方案

话虽如此。。。 我有三套沙发。每组由2个分区组成（一个分区在另一个分区内）。在外部div上有一个函数，它说如果单击它，就创建一个边框

要查看错误，请执行以下操作：

点击单词OUTER

点击单词INNER

假定代码仅在外部创建边框

HTML

事件传播
外面的
内部的
外面的
内部的
外面的
内部的

JS

    <script>
        function onLoad(){
            
            const elOuter = document.querySelectorAll(".outer")

            elOuter.forEach(element=>{
                element.addEventListener('click', fnChangeColor,false)
            })
        }

        function fnChangeColor(e){

            e.target.style.border="1px solid black"

            if (e.stopPropagation) {
  
                e.stopPropagation()
            } else {
  
                e.cancelBubble = true
            }
        }

    </script>

函数onLoad（）{
const elOuter=document.queryselectoral（“.outer”）
elOuter.forEach（元素=>{
元素。addEventListener（'click'，fnChangeColor，false）
})
}
功能fnChangeColor（e）{
e、 target.style.border=“1px纯黑”
如果（如停止播放）{
e、 停止传播（）
}否则{
e、 取消气泡=真
}
}

---

仅供参考-我解决了将e.stopPropagation归因于孩子的问题。成功了。但我知道这不是最好的办法。如果我有一个里面有100个div的div，那将是人间地狱。

这是因为当你点击“内部”e时，目标元素是“内部”，而不是“外部”

在我看来，你所做的似乎是试图理解事件授权， 这样做：

xxx
body>div{display:inline block；}
.外部{高度：100px；宽度：100px；背景：浅灰色；}
.内部{高度：50px；宽度：50px；边距：20px；背景：浅蓝色；}
.边框{边框：1px纯黑；}
内外
内外
内外
document.body.onclick=e=>{
如果（！e.target.matches（'.outer'））返回//忽略其他单击事件
e、 target.classList.toggle（'边框'）
}

还是这样

document.querySelectorAll（'.outer'）.forEach（el=>{
el.onclick=e=>{
//console.log（e.target.className）
如果（！e.target.matches（'.outer'））返回//忽略其他单击事件
e、 target.classList.toggle（'边框'）
}
})

在您的代码中，只使用了一个事件，没有任何传播方式

当用户单击

.internal

时，事件会附加到

.internal

元素上，而

.outer

元素上的事件不会附加到
这就像一个泡沫，它是一个自下而上的方式，而不是相反。 当气泡找到目标代码（avent侦听器）时，不再传播，气泡破裂

如果要查看事件传播，必须设置两个事件侦听器（即两个bubles）

您可以通过添加console.log（e.target.className）看到这一点，如下所示：

document.querySelectorAll（“.outer，.inner”）/=>6个事件侦听器
.forEach（el=>{el.addEventListener（'click'，getClick，false）}）
变量计数器=0
函数getClick（e）
{
console.log（`${++counter}-事件侦听器位于：${e.currentTarget.className}
单击的元素是：${e.target.className}`）
}
cClear.onclick={counter=0；console.clear（）}

body>div{display:inline块；}
.外部{高度：100px；宽度：100px；背景：浅灰色；}
.内部{高度：50px；宽度：50px；边距：20px；背景：浅蓝色；}

外部-内部
内外
内外
清除控制台

在本例中，我们有一个外部div-父级，而内部div-子级

因此，这里要理解的问题是：

目标：谁触发了事件。 currentTarget：在中设置了函数的元素

单击内部div时，您正在单击子元素，但具有该函数的元素是父元素。因此-函数应该更改currentTarget（外部div），而不是目标（即单击的内部div）

只是必须改变

e、 target.style.border=“1px纯黑”

与

---

我的函数仅适用于document.querySelectorAll（“.Outer”）。至少这是我在代码里写的。用你的方式我会听到身体里所有的咔哒声，对吗？然后比较它是用于哪个元素，然后应用函数。是吗？@KajiyamaVK不，您的函数不仅适用于“.Outer”元素，还适用于“.inner”。是的，用我的方式我会听到身体里所有的咔哒声。如果您愿意，您可以设置3个事件监听器（正如您所做的那样），其中的代码与我的相同，或者将所有“.outer”放在一个div容器中。matches方法使用相同的css语法来过滤dom元素soh。。。是 啊因为传播，对吧？这就是为什么我要使用stopPropagation函数。我有办法让它工作。我想知道为什么传播没有停止。@KajiyamaVK我用更多的解释改变了我的答案。这对你有用吗？你使用了这个解决方案，却没有注意到。lol当前目标。只需将“目标”更改为当前目标，一切正常。没有创造任何其他东西。

    <script>
        function onLoad(){
            
            const elOuter = document.querySelectorAll(".outer")

            elOuter.forEach(element=>{
                element.addEventListener('click', fnChangeColor,false)
            })
        }

        function fnChangeColor(e){

            e.target.style.border="1px solid black"

            if (e.stopPropagation) {
  
                e.stopPropagation()
            } else {
  
                e.cancelBubble = true
            }
        }

    </script>

e.currentTarget.style.border="1px solid black"