Javascript DOM Event.StopPropagation到子级无效

我正在做一个关于事件的教程，我一直坚持使用

Event.StopPropagation（）

方法。以我为例，似乎对孩子们的泡沫效应正在受到影响

停止播放的定义：

stopPropagation（）方法防止调用同一事件的传播。 传播意味着向上冒泡到父元素或向下捕获到子元素

起初我认为这是一个浏览器问题，但事实并非如此。我找不到解决这个问题的办法

代码：

//事件冒泡和传播
//元素。addEventListener（类型、函数、使用捕获）；
设m=document.getElementById（'m'）；
设d=document.getElementById（'d'）；
设p=document.getElementById（'p'）；
设s=document.getElementById（'s'）；
让高亮显示=（ev）=>{
//将CSS类“gold”添加到单击的元素
ev.stopPropagation（）；
设target=ev.currentTarget；
target.className='gold'；
重置（目标）；
}
重置=（_元素）=>{
设置超时（（）=>{
_element.className=''；
}, 2000);
}
d、 addEventListener（'单击'，（ev）=>{
ev.立即停止传播（）；
日志（“嗨，我是一个DIV”）；
});
[m，d，p，s].forEach（（元素）=>{
元素。addEventListener（'单击'，高亮显示）；
})

#m，#d，#p，#s{
边框：2件纯黑；
填充：15px；
利润率：10px；
}
.金{
背景颜色：金色；
}

m
D
p
s

这不是事件的问题，您想得太多了

您的示例只是将背景色应用于顶部元素，并且由于子元素没有定义背景色，所以它将应用其下面的顶部元素

如果删除

stopImmediatePropagation（）

将应用颜色，因为定义是：执行第一个事件处理程序，并停止执行其余的事件处理程序，第一个事件处理程序只是

log（）

在下面的示例中，如果将背景色应用于子元素，您将看到它们将保持不变。它自身的颜色仅应用于单击的一个

这意味着JS事件本身没有向上冒泡到父元素或向下捕获。类仅在单击一个时添加。使用开发工具进行检查，或者在每个元素上添加DOM更改事件侦听器

你把CSS样式和JS事件冒泡混淆了

例如：

//事件冒泡和传播
//元素。addEventListener（类型、函数、使用捕获）；
设m=document.getElementById（'m'）；
设d=document.getElementById（'d'）；
设p=document.getElementById（'p'）；
设s=document.getElementById（'s'）；
让log=console.log；
让高亮显示=（ev）=>{
//将CSS类“gold”添加到单击的元素
ev.stopPropagation（）；
设target=ev.currentTarget；
target.className='gold'；
重置（目标）；
}
重置=（_元素）=>{
设置超时（（）=>{
_element.className=''；
}, 2000);
}
d、 addEventListener（'单击'，（ev）=>{
//ev.立即停止传播（）；
日志（“嗨，我是一个DIV”）；
});
[m，d，p，s].forEach（（元素）=>{
元素。addEventListener（'单击'，高亮显示）；
})

#m，#d，#p，#s{
边框：2件纯黑；
填充：15px；
利润率：10px；
}
#d{
背景颜色：蓝色；
}
#{
背景色：红色；
}
.金{
背景色：金色！重要；
}

m
D
p
s

但是有没有办法控制只影响自身元素的背景色？因此，每次单击一个元素时，只有触发器元素会更改。@johny我编辑了我的答案，但简短的回答是没有简单的方法。您需要设置单击的元素子元素的背景色。