事件冒泡在树形菜单中从子节点逐层向上触发父节点监听器，需通过event.target精准识别点击元素，选择性调用stopPropagation()阻止误触发，推荐委托监听统一处理。
事件冒泡在树形菜单中天然存在，关键在于理解它如何从子节点向上逐层触发父节点的事件监听器，并合理利用或阻止它。
树形菜单的 DOM 结构决定冒泡路径
典型的树形菜单由嵌套的 <ul> 和 <li> 构成，每个菜单项可能是 <a> 或 <button>。点击一个叶子节点（比如某个子菜单项），事件会按 DOM 树层级依次向上触发其父 <li>、父 <ul>、再上层 <li>，直到 document。
例如：
<ul class="menu">
<li>首页</li>
<li>产品
<ul>
<li>Web 端</li>
<li class="active">移动端</li> <!-- 点击这里 -->
</ul>
</li>
</ul>点击“移动端”时，冒泡路径是：<li class="active"> → 外层 <ul> → <li>产品</li> → <ul class="menu"> → body → document。
立即学习“Java免费学习笔记（深入）”；
用 event.target 精准识别真正被点击的元素
由于事件监听器常绑定在父容器（如整个 .menu）上，必须靠 event.target 判断用户实际点的是哪个菜单项，而不是监听器所在的父元素。
- 不要依赖
this或event.currentTarget—— 它们指向绑定事件的元素（比如最外层ul） - 始终检查
event.target，它指向最初触发事件的最深子元素 - 常用判断方式：
event.target.matches('li > a, li > button')或event.target.closest('li')获取最近的菜单项
有选择地阻止冒泡，避免误触发父级逻辑
不是所有冒泡都需要阻止，但以下情况建议调用 event.stopPropagation()：
- 点击某项展开/折叠子菜单时，不希望同时触发上级菜单的选中逻辑
- 菜单项内包含开关、复选框等交互控件，点击控件本身不应影响菜单高亮状态
- 父容器绑定了全局收起菜单的监听器（比如点击菜单外区域关闭），而你只想响应菜单内部操作
注意：一般不用 event.stopImmediatePropagation()，除非明确要阻止同一元素上其他监听器执行。
推荐做法：委托监听 + 条件响应 + 按需拦截
给最外层菜单容器绑定一个事件监听器，统一处理所有点击，比给每个菜单项单独绑定更高效且易维护。
document.querySelector('.menu').addEventListener('click', function (e) {
const item = e.target.closest('li');
if (!item) return;
<p>// 若点击的是展开图标（如 .toggle-btn），只展开/折叠，不选中
if (e.target.matches('.toggle-btn')) {
toggleSubmenu(item);
e.stopPropagation(); // 阻止向上冒泡影响父级选中逻辑
return;
}</p><p>// 若点击的是菜单文字或链接，标记为激活项
markActive(item);</p><p>// 可选：自动收起其他同级菜单（此时不阻止冒泡，让父逻辑继续）
});这样既利用了冒泡机制实现统一管理，又通过精准判断和选择性拦截，让树形菜单行为清晰可控。
