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

Question

我有一个函数，当单击一个元素时，它会在两种颜色之间简单地切换，我在父元素和子元素上使用了相同的函数，单击事件在父元素上按预期工作，但在子元素上却没有- 为什么？

    <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>

Answer 1

我认为这是由于事件传播而发生的。当您单击子元素时，将触发子元素的单击处理程序，然后触发父元素的单击处理程序，这将导致您的情况出现意外行为。

将 e.stopPropagation() 添加到您的 toggleColor 函数，一切都应该按预期工作。

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

Why is this click event triggering on the child element, when using e.target?

javascript

events

event-propagation