Почему это событие click срабатывает на дочерний элемент при использовании e.target? - PullRequest
Новая
       18

Почему это событие click срабатывает на дочерний элемент при использовании e.target?

0 голосов
/ 22 сентября 2018

У меня есть функция, которая просто переключается между двумя цветами при щелчке по элементу, я использовал одну и ту же функцию для родительских и дочерних элементов, событие 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>

1 Ответ

0 голосов
/ 22 сентября 2018

Я думаю, что это происходит из-за распространения событий.Когда вы щелкаете по дочернему элементу, запускается обработчик щелчка дочернего элемента, за которым следует обработчик щелчка родительского элемента, который может привести к неожиданному поведению в вашем случае.

Добавьте e.stopPropagation () к вашей функции toggleColor и вседолжен работать как положено.

...