核心是监听document点击事件并判断目标是否在菜单外：缓存菜单节点，用menu.contains(e.target)排除内部点击，显示时绑定、隐藏后解绑，配合class切换显隐状态避免布局抖动。
点击页面空白处隐藏菜单的事件监听逻辑
核心是监听 document 的点击事件，而不是只监听菜单本身或按钮。很多人误以为给菜单加 click 就能控制显隐，结果点空白处没反应——因为事件根本没触发到那个元素上。
关键在于：菜单显示时，必须确保点击发生在菜单外部区域才触发隐藏。不能简单用 document.addEventListener('click', ...) 无差别执行 hide，否则菜单自己一点击就消失了。
- 用
e.target判断点击目标是否在菜单及其子元素内（可用menu.contains(e.target)） - 菜单 DOM 节点需提前缓存，比如
const menu = document.getElementById('nav-menu'); - 避免重复绑定：每次切换菜单状态前，先用
document.removeEventListener清掉旧监听器，或用标志位控制执行逻辑
HTML 结构与 class 控制显隐的配合方式
菜单的显示/隐藏不推荐用 display: none 切换后重排布局，容易引发抖动；更稳妥的是用 visibility: hidden + opacity: 0 配合 CSS 过渡，同时保持占位。
实际中建议用 class 控制状态，比如定义 .menu-hidden 和 .menu-visible，再通过 JS 切换 menu.classList.toggle('menu-visible')。
- 菜单容器必须有明确的
id或class，且不能被pointer-events: none阻断事件捕获 - 如果菜单里有下拉项、输入框等可交互子元素，要确保它们不会意外中断事件冒泡（一般不需要阻止）
- 移动端要注意
touchstart事件兼容，部分 iOS 机型对click有 300ms 延迟，可改用touchend并同时监听两者
常见错误：点击菜单内部却触发了隐藏
典型现象是：菜单展开后，点菜单里的链接或按钮，菜单突然消失——这是因为事件冒泡到了 document 层，而判断逻辑没排除菜单内部点击。
修复方式不是阻止冒泡（会破坏按钮功能），而是严格检查 e.target 是否属于菜单范围：
document.addEventListener('click', function(e) {
if (!menu.contains(e.target) && menu.classList.contains('menu-visible')) {
menu.classList.remove('menu-visible');
}
});
-
menu.contains(e.target)返回true表示点击在菜单内（含子元素），此时不执行隐藏 - 注意：如果菜单是用
position: fixed或absolute浮动的，不影响contains判断，它只看 DOM 树关系 - 若菜单由多个分散节点组成（如侧边栏 + 顶部条），需分别检查或统一包在一个容器里
Vue/React 等框架下的注意事项
在框架中直接操作 DOM 仍可行，但容易和响应式更新冲突。比如 Vue 中用 v-if 控制菜单渲染，再手动加事件监听，可能导致 menu 变量为 null。
- Vue 推荐用
@click.stop在菜单根元素上阻止冒泡，再用@click绑定到document（通过mounted/onMounted添加，unmounted清除） - React 中不要在
useEffect里漏掉清理函数，否则可能监听残留导致多次触发 - 框架组件内若使用 Portal 渲染菜单（如弹出层挂载到
body），menu.contains(e.target)依然有效，因为 Portal 不改变 DOM 包含关系
最易忽略的是事件监听未及时销毁——尤其在单页应用路由切换时，旧菜单 DOM 被移除，但监听器还在，e.target 可能为 null 或指向已卸载节点，引发报错或误触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
