Javascript 使用e.target时，为什么会在子元素上触发此单击事件？

我有一个函数，当单击一个元素时，它只在两种颜色之间变化，我在父元素和子元素上使用了相同的函数，单击事件在父元素上按预期工作，但在子元素上不工作-为什么

    <div class="parent red">
        <div class="child blue"></div>
    </div>
    <script scr="text/javascript" defer>
        let parent=document.getElementsByClassName("parent")[0];
        let child= document.getElementsByClassName("child")[0];

        function toggleColor(e){
            let background= e.target.classList;
            console.log(e.target);
            console.log("event fired")
            if(background.contains("blue")){
                e.target.classList.remove("blue");
                e.target.classList.add("red");
                console.log("event fired")
            }
            else if(background.contains("red")){
                e.target.classList.remove("red");
                e.target.classList.add("blue");
                console.log("event fired")
            }
        }



        parent.addEventListener("click",toggleColor,false);
        child.addEventListener("click", toggleColor,false);
    </script>

让parent=document.getElementsByClassName（“parent”）[0]；
let child=document.getElementsByClassName（“child”）[0]；
功能切换颜色（e）{
让background=e.target.classList；
console.log（如target）；
console.log（“触发事件”）
if（背景包含（“蓝色”））{
e、 target.classList.remove（“蓝色”）；
e、 target.classList.add（“红色”）；
console.log（“触发事件”）
}
else if（背景包含（“红色”））{
e、 target.classList.remove（“红色”）；
e、 target.classList.add（“蓝色”）；
console.log（“触发事件”）
}
}
parent.addEventListener（“单击”，切换颜色，false）；
addEventListener（“单击”，切换颜色，false）；

我认为这是因为事件传播。当您单击子元素时，会触发子元素的click处理程序，然后触发父元素的click处理程序，这将导致您的案例中出现意外行为

---

将e.stopPropagation（）添加到您的toggleColor函数中，所有操作都应按预期工作。

运行此脚本时，如果控制台日志显示事件已触发三次，请检查。