点击空白处隐藏浮动菜单的核心是监听document点击事件，判断event.target是否在菜单内或触发按钮上，否则关闭；需动态绑定/移除监听器、支持esc键关闭，并处理嵌套浮层场景。
点击空白处隐藏浮动菜单，核心是监听全局点击事件，判断点击目标是否在菜单内部或触发按钮上，不是则关闭菜单。
监听 document 点击并排除菜单和触发元素
给 document 绑定一次点击事件，在回调中检查 event.target 是否位于浮动菜单（或其子元素）内，或是否为打开菜单的按钮。如果不是，就隐藏菜单。
- 用
menu.contains(event.target)判断点击是否落在菜单及其后代中 - 用
event.target === toggleBtn || toggleBtn.contains(event.target)保留按钮区域可点击 - 注意：需确保菜单已渲染、DOM 元素存在后再绑定事件
避免重复绑定与内存泄漏
每次打开菜单时动态绑定 document 点击事件，关闭时立即移除——防止多次打开导致多个监听器堆积。
- 把事件监听函数定义为具名函数（如
handleDocumentClick），方便后续removeEventListener - 不要在每次 showMenu 中用匿名函数绑定，否则无法精准解绑
- 如果菜单支持键盘关闭（如按 Esc），也建议同步移除 document 点击监听
处理嵌套浮层与焦点穿透场景
若菜单内含下拉、弹窗等子浮层，仅靠 contains() 可能误关。此时可加一层“浮层栈”管理：
- 点击时从最顶层浮层开始向上检查
contains(event.target) - 或给所有浮层统一加 class（如
js-floating），用event.target.closest('.js-floating')查找最近浮层 - 若找到且该浮层未被销毁，则不触发隐藏逻辑
补充：快捷键支持（Esc）
增强体验，按 Esc 键也能关闭菜单，逻辑更完整：
- 在 document 上监听
keydown，判断event.key === 'Escape' - 触发关闭时，同样要先清理点击监听器
- 注意：只在菜单显示时监听，隐藏时移除，避免全局干扰
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
