下拉菜单点击外部关闭的核心是利用事件冒泡机制：在菜单和触发按钮的click事件中调用event.stopPropagation()阻止冒泡，再监听document点击，用element.contains()判断点击是否在菜单或按钮内部，否则关闭菜单。
下拉菜单点击外部关闭，核心是利用事件冒泡机制配合 event.stopPropagation() 阻止内部点击事件向上冒泡，再通过监听 document 的点击事件来判断是否点在菜单外。
监听 document 点击并判断是否在菜单外
给 document 绑定一个全局点击事件，当点击发生时，检查触发元素（event.target）是否在下拉菜单及其触发按钮内。如果都不匹配，就关闭菜单。
- 用
element.contains(event.target)判断点击是否落在菜单或按钮内部（比closest()更可靠，尤其对动态插入的元素） - 避免直接用
event.target === dropdown || event.target === toggleBtn，因为子元素点击也会触发，需覆盖整个区域
阻止菜单和按钮内部点击冒泡到 document
如果不阻止，点击菜单项或按钮本身也会触发 document 的监听器，导致刚打开就关闭。
- 在下拉菜单容器和触发按钮的
click事件处理函数中调用event.stopPropagation() - 注意：不要在
document监听器里做这个操作，它必须发生在更早的捕获/冒泡阶段
使用事件委托简化逻辑（可选但推荐）
如果菜单是动态生成的，或存在多个下拉菜单，建议把关闭逻辑封装成可复用函数，并用事件委托统一管理。
立即学习“Java免费学习笔记（深入）”；
- 给所有下拉触发按钮加统一 class（如
js-dropdown-toggle），菜单加js-dropdown-menu - 在
document点击事件中遍历所有已打开的菜单，逐个判断!toggleBtn.contains(e.target) && !menu.contains(e.target) - 这样无需为每个菜单单独绑定/解绑事件，也避免重复监听
注意 click 与 focusout 的差异
click 是最常用方式，但某些场景（如键盘 Tab 切换、触摸屏快速点击）可能漏判。可补充 focusout 或 blur 作为辅助：
- 给菜单容器设
tabindex="-1"，使其可获得焦点 - 监听其
blur事件，配合setTimeout延迟判断是否真的失焦（防止点击内部元素时误触发） - 纯
click方案已满足大多数桌面和移动端需求，优先保证简洁稳定
