事件冒泡在菜单折叠中用于简化事件绑定，通过父容器统一监听并判断target实现精准控制，配合stopPropagation、preventDefault及事件委托支持动态菜单与多级嵌套。
事件冒泡在菜单折叠中主要用于简化事件绑定，避免为每个子菜单项单独添加监听器，同时精准控制展开/收起行为——关键在于利用冒泡特性，在父容器上统一处理点击，并阻止默认冒泡干扰其他逻辑。
用事件冒泡统一监听菜单触发点
把点击监听器只加在菜单根容器（比如 或 ）上，而不是每个 或 。当用户点击任意可折叠项（如带箭头的标题、加号图标），事件会冒泡到根容器，再通过 event.target 判断是否是折叠开关元素。
- 检查
event.target.matches('.menu-toggle, .submenu-header')等选择器，确认点击的是折叠控制节点 - 用
closest()向上查找最近的菜单项，定位对应子菜单区域：event.target.closest('li').querySelector('.submenu') - 切换该子菜单的显示状态（如添加/移除
open类或修改max-height）
阻止冒泡避免意外触发上级菜单
如果菜单是多级嵌套（比如三级下拉），点击子菜单的折叠按钮时，事件可能继续向上冒泡，误触父级菜单的折叠逻辑。此时需在处理子菜单事件后显式调用 event.stopPropagation()。
- 仅对实际执行折叠操作的点击调用
stopPropagation()，不影响文档其他区域的事件流 - 不要在根容器监听器里全局阻止，否则会影响外部点击收起菜单等需求
- 常见错误：在
document点击收起菜单时，未排除菜单内部点击 —— 应用event.target.closest('.menu')判断点击是否在菜单内
配合事件委托实现动态菜单支持
当菜单项通过 JS 动态生成（如从 API 加载），直接绑定事件会失效。事件冒泡 + 事件委托天然适配此场景：根容器监听器对后续新增的折叠按钮依然有效。
- 确保动态插入的折叠按钮有统一标识（如
data-action="toggle-submenu"） - 监听器中用
event.target.dataset.action === 'toggle-submenu'做判断，比 CSS 类更可靠 - 无需每次追加节点后重新绑定，维护成本低
注意默认行为与冒泡的协作边界
若折叠按钮是 或 ，点击会触发默认跳转或表单提交。需调用 event.preventDefault() 阻止，但它和 stopPropagation() 互不干扰，可共存。
-
preventDefault()解决“页面跳动”问题，stopPropagation()解决“误触上级”问题，二者职责不同 - 顺序无关紧要，但建议先
preventDefault()再处理业务逻辑，提高可读性 - 避免在非交互元素（如纯
）上依赖冒泡 —— 应确保触发源本身可聚焦或有明确语义
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
