使用e.target時，為什么此點擊事件在子元素上觸發？

Question

我有一個函數，當單擊一個元素時，該函數只是在兩種顏色之間切換，我在父元素和子元素上使用了相同的函數，click事件在父元素上起作用，但在子元素上沒有預期-為什么？

    <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函數中，一切將按預期工作。