级联菜单自动收起应监听document点击事件，用menu.contains(e.target)判断点击是否在菜单内，不在则收起；内部点击需e.stoppropagation()防止误触发；同时监听focusout配合relatedtarget确保键盘操作也能收起。
在级联菜单（如多级下拉导航）中，利用事件冒泡实现自动收起，核心思路是：**把“收起”逻辑统一绑定在菜单容器上，而不是每个子项单独监听点击或失焦，靠冒泡让点击内部任意元素都不触发收起，只有点击容器外部才收起**。
用事件冒泡区分“菜单内点击”和“菜单外点击”
级联菜单通常由一个外层容器（比如 <nav class="dropdown-menu"></nav>）包裹所有层级。你可以给这个容器绑定 click 事件，并在事件处理函数中检查 e.target 是否在菜单结构内：
- 如果点击的是菜单自身或它的任意后代（比如某一级菜单项、箭头图标、文字），说明用户仍在操作菜单 → 不收起；
- 如果点击的是容器之外的任何地方（比如页面其他区域、按钮、空白处），事件会冒泡到
document，此时判断是否在菜单内即可决定是否收起。
推荐做法：监听 document 点击 + contains 判断
更健壮的方式不是监听菜单容器，而是监听 document 的点击事件，并用 menuElement.contains(e.target) 判断点击是否落在菜单范围内：
- 先给菜单容器设一个唯一标识（如
id="main-menu"或 class）； - 在
document.addEventListener('click', ...)中，检查e.target是否属于该菜单或其子元素； - 如果不属于，就调用收起函数（比如
closeAllSubmenus()）。
这样写既利用了冒泡（点击子菜单项→冒泡到 document），又避免了误收——因为子项点击也会触发该监听器，但 contains 能准确过滤掉。
注意阻止内部点击的默认冒泡干扰（可选）
有些交互（比如点击子菜单项跳转、展开下级）本身会触发点击事件。如果你不希望这些操作再额外触发 document 的收起逻辑，可以在这些内部事件处理器中调用 e.stopPropagation()：
- 例如，点击某个
<li class="has-sub">展开二级菜单时，在事件回调里加e.stopPropagation()； - 这不会影响事件本身的执行（仍能展开），但阻止它继续向上冒泡到
document，避免被误判为“菜单外点击”。
配合 focusout / blur 处理键盘操作（增强可用性）
纯鼠标依赖不够健壮。对支持键盘导航的菜单，建议补充 focusout 监听（监听菜单容器）：
- 当焦点离开整个菜单区域（比如按 Tab 移出最后一个可聚焦元素），触发收起；
- 同样用
e.relatedTarget配合menu.contains()判断焦点是否还留在菜单内； - 这样鼠标点击外部 + 键盘移出，都能自然收起，体验一致。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
