如何实现仅点击不含has-sub类的sidebar-item时触发指定事件？

需要实现：点击导航菜单中不含has-sub类的.sidebar-item元素时执行特定代码。但目前给sidebar元素绑定了点击事件，点击sidebar任意区域都会触发逻辑，如何修改代码满足需求？

相关HTML结构 #

<div class="sidebar-menu">
    <ul class="menu">
        <li class="sidebar-title">Menu</li>
        <li class="sidebar-item">
            <a href="/" class="sidebar-link active">
                <i class="bi bi-grid-fill"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="sidebar-item">
            <a href="/Counter" class="sidebar-link">
                <i class="bi bi-grid-fill"></i>
                <span>Counter</span>
            </a>
        </li>
        <li class="sidebar-item  has-sub">
            <a href="#" class="sidebar-link">
                <i class="bi bi-stack"></i>
                <span>Components</span>
            </a>
            <ul class="submenu ">
                <li class="submenu-item ">
                    <a href="component-alert.html">Alert</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

当前代码 #

let sidebarEl = document.getElementById("sidebar")
sidebarEl.addEventListener("click", function () {
    var w = window.innerWidth;
    if (w <= 991) {
        sidebarEl.classList.remove("active");
    }
});

修改方案 #

利用事件委托特性，在点击回调中精准判断目标元素：

let sidebarEl = document.getElementById("sidebar")
sidebarEl.addEventListener("click", function (event) {
    // 从点击元素向上查找最近的sidebar-item
    const targetItem = event.target.closest('.sidebar-item');
    
    // 仅当找到目标元素且该元素不含has-sub类时执行逻辑
    if (targetItem && !targetItem.classList.contains('has-sub')) {
        var w = window.innerWidth;
        if (w <= 991) {
            sidebarEl.classList.remove("active");
        }
        // 在这里添加你需要执行的其他特定代码
    }
});

关键说明 #

• event.target.closest('.sidebar-item')：不管点击的是.sidebar-item本身还是它内部的子元素（比如<a>、图标、文字），都会正确匹配到对应的父级.sidebar-item元素
• !targetItem.classList.contains('has-sub')：过滤掉带有下拉菜单的.sidebar-item，确保只有普通菜单项触发逻辑
• 点击sidebar的其他区域（比如.sidebar-title、子菜单区域）时，不会执行目标代码，完全符合需求

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