如何实现点击导航栏外部自动收起响应式侧边栏功能？

本文共计952个文字，预计阅读时间需要4分钟。

相关专题

本文介绍一种健壮、无干扰的方案，通过事件委托与 `contains()` 方法精准判断点击位置，实现点击汉堡按钮展开菜单、点击菜单外部区域（包括文档空白处）自动收起，同时避免点击触发器本身导致的误关闭。

在构建响应式导航栏（尤其是移动端汉堡菜单）时，一个常见痛点是：菜单能正常打开，却无法可靠关闭——尤其是当用户点击菜单区域以外的任意位置（如背景、其他内容区）时。直接监听全局 click 事件并粗暴比对 e.target 往往失效，原因在于：

• 点击汉堡按钮（#burger）也会触发全局监听器，导致刚展开即被 remove('show') 关闭；
• e.target !== nav 判断过于宽泛，无法区分“点击的是导航内部元素”还是“真正外部”。

✅ 正确解法的核心在于事件隔离与边界判定：

1. 阻止冒泡：在 showNav 中调用 e.stopPropagation()，确保点击汉堡按钮不会穿透到全局监听器；
2. 动态绑定/解绑：仅在菜单显示时注册一次全局 click 监听器，隐藏后立即移除，避免内存泄漏与重复响应；
3. 语义化判定：使用 nav.contains(e.target) 判断点击目标是否位于 <nav> 内部（含所有子元素），若不包含，则执行关闭逻辑。