如何用JavaScript禁止非激活状态触发点击，仅点击汉堡菜单外区域关闭菜单

你当前代码使用toggle方法会在每次触发点击时直接反转菜单状态，且没有做点击区域校验，才会出现任意位置点击都切换菜单的问题。按如下方案修改即可实现仅点击菜单外区域关闭菜单的需求：

实现代码 #

你可以保留原有汉堡图标点击开关、关闭图标点击关闭的逻辑，新增全局点击区域校验逻辑即可：

// 全局点击监听，判断是否要关闭菜单
document.addEventListener('click', function(e) {
  const navEl = document.querySelector('.nav')
  // 请将下方 #hamburger-btn 替换为你实际的汉堡菜单触发按钮选择器
  const hamburgerBtn = document.querySelector('#hamburger-btn')
  // 校验点击区域：是否在菜单内部、是否是汉堡触发按钮
  const clickInsideNav = navEl.contains(e.target)
  const clickHamburger = hamburgerBtn.contains(e.target)

  // 仅当点击区域不在菜单内、不是汉堡按钮、且菜单处于展开状态时，执行关闭操作
  if (!clickInsideNav && !clickHamburger && navEl.classList.contains('nav-container')) {
    navEl.classList.remove('nav-container')
  }
})

// 原有汉堡按钮点击逻辑如果正常可以保留，建议确认触发元素正确
// 如果你原来绑定事件的 #bg-close 是菜单内的关闭按钮，建议把toggle改为remove，避免误操作
document.querySelector('#bg-close').addEventListener('click', function() {
  document.querySelector('.nav').classList.toggle('nav-container')
})

调整说明 #

如果你的#bg-close是全屏半透明遮罩层，直接把对应事件里的toggle方法改为remove，就能直接解决任意点击切换菜单的问题，不需要额外加其他逻辑。

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