点击外部关闭Navbar时，汉堡按钮事件冲突的修复方案咨询

问题根源是事件冒泡：点击汉堡按钮后，事件会向上传递到document，触发了你绑定的document.onclick事件，刚添加的active类立刻被移除，导致导航栏无法正常展开。

下面是两种可行的修复方案：

方案1：阻止汉堡按钮点击事件的冒泡 #

直接在openNav函数中阻止事件向上冒泡，切断事件传递到document的路径：

1. 修改汉堡按钮的onclick属性，传递事件对象：

<span class="hamburger" id="hamburger" onclick="openNav(event)">

2. 更新openNav函数，添加阻止冒泡的逻辑：

function openNav(event) {
    // 阻止事件冒泡到document
    event.stopPropagation();
    navBar.classList.toggle('active');
    document.body.style.backgroundColor = 'rgba(0,0,0,0.4)';
}

方案2：优化document.onclick的判断逻辑 #

除了排除导航栏本身，还要排除汉堡按钮及其内部元素，同时确保点击导航栏内部时不会触发关闭逻辑：

更新document的点击事件处理函数：

document.onclick = function(clickEvent) {
    // 判断点击目标是否不在导航栏内，且不是汉堡按钮区域
    const isOutsideNav = !clickEvent.target.closest('#nav-bar');
    const isNotHamburger = !clickEvent.target.closest('#hamburger');
    
    if (isOutsideNav && isNotHamburger) {
        navBar.classList.remove('active');
        document.body.style.backgroundColor = '#fefefe'; // 同步恢复页面背景色
    }
}

这个方案更健壮：closest方法能正确识别点击目标是否属于汉堡按钮/导航栏的子元素，避免因按钮内部有嵌套元素导致判断失效；同时点击导航栏内部任何区域都不会触发关闭，符合用户操作预期。

额外建议：把全局变量navBar声明为const，避免全局污染：

const navBar = document.getElementById('nav-bar');

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