为何点击非目标子元素会触发querySelectorAll绑定的事件？

我给.mobile-nav .menu-item-has-children元素绑定了点击事件监听器，但点击该元素内部的子元素（比如"Our Customers"项）时，也会触发这个点击事件，这是为什么？

相关代码 #

JavaScript #

function addEventListenerToAll(selector, type, listener)
{
    [].forEach.call(document.querySelectorAll(selector), function(element) {
        if (element) {
            element.addEventListener(type, listener);
        }
    });
}
    
addEventListenerToAll(".mobile-nav .menu-item-has-children", "click", function(event) {
    console.log("click event is invoked");
});

CSS #

.mobile-nav .menu-item-has-children {
    background:green;
}

HTML #

<nav class="main-navigation mobile-nav" role="navigation" style="display: block;">
    <ul id="menu-main-menu" class="sf-menu mobile-menu">
        <li id="menu-item-1294" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1294">
            <a href="https://www.sybase-recovery.com/company/">
                Company
                <svg class="my-svg-inline--fa my-fa-w-10"><use href="/images/icons/icons.svg#facebook-f"></use></svg>
            </a>
            <ul class="sub-menu" style="display: block;">
                <li id="menu-item-433" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-433">
                    <a href="https://www.sybase-recovery.com/our-customers/">Our Customers</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

这是DOM事件的**事件冒泡（Event Bubbling）**特性导致的：当你点击一个DOM元素时，点击事件会从触发事件的目标元素开始，沿着DOM树向上逐层传播，依次触发所有祖先元素上绑定的同类型事件。

在你的HTML结构里，"Our Customers"所在的<li>是.menu-item-has-children元素的子节点，所以点击这个子元素时，事件会向上冒泡到父元素，触发你绑定的点击监听器。

提供两种常用的处理方式：

1. 仅在点击绑定元素本身时执行逻辑 #

通过对比event.target（实际触发事件的元素）和event.currentTarget（绑定事件的元素），只在两者相同时执行代码，避免子元素触发：

addEventListenerToAll(".mobile-nav .menu-item-has-children", "click", function(event) {
    if (event.currentTarget === event.target) {
        console.log("click event is invoked");
    }
});

2. 阻止事件冒泡 #

调用event.stopPropagation()阻止事件向上传播，这样子元素的点击事件就不会触发父元素的监听器。但注意这种方式会影响该元素所有祖先元素的同类型事件，使用时要确认不会破坏其他逻辑：

addEventListenerToAll(".mobile-nav .menu-item-has-children", "click", function(event) {
    event.stopPropagation();
    console.log("click event is invoked");
});

内容的提问来源于stack exchange，提问作者alancc