捕获阶段监听点击可精准识别目标层级并阻止冒泡干扰；通过data-panel-toggle和data-panel-id区分层级与状态，实现同级互斥联动；确认有效点击后调用stoppropagation防止误触。
捕获阶段拦截点击，精准识别目标层级
多级联动折叠面板中，常需点击子项时阻止父级展开/收起。直接在各级元素绑定事件容易触发多次冒泡，用 capture: true 在捕获阶段监听，能第一时间拿到真实点击目标，避免被外层容器干扰。
关键点：把事件监听器加在最外层容器上，配置 { capture: true }，然后用 event.target 判断是否为可折叠项（如带 data-panel-toggle 的按钮），再调用对应逻辑。
用 dataset 区分层级与状态，避免硬编码 ID
每级面板的触发按钮应统一标记层级信息，例如：
<button data-panel-toggle="level-1" data-panel-id="menu"></button><button data-panel-toggle="level-2" data-panel-id="submenu-1"></button>
在捕获回调里读取 event.target.dataset.panelToggle 和 panelId，即可明确知道用户点了哪一级、哪个面板，后续展开/收起、兄弟闭合、父子联动等逻辑都基于此驱动，不依赖 DOM 结构深度或 class 名称。
联动控制：展开当前时自动收起同级其他项
多级面板常见需求是“同级互斥”——点一个子菜单时，同级其他子菜单要关闭。可在捕获回调中：
- 先查出所有同
panelToggle值的可折叠项（如所有level-2按钮） - 遍历它们对应的面板容器（通过
panelId关联），关闭除当前目标外的所有 - 再展开当前目标面板
注意：这个过程必须在捕获阶段完成，否则冒泡到父级后可能触发上级折叠，造成闪烁或状态错乱。
防止误触：用 event.stopPropagation() 阻断冒泡但保留捕获链
一旦确认点击的是有效折叠控件，立刻调用 event.stopPropagation() —— 这不会影响捕获阶段已注册的其他监听器（比如全局快捷键），但能阻止事件继续冒泡到父容器的 click 处理函数，避免重复响应。
特别适合嵌套结构：按钮在卡片内，卡片本身也有点击跳转逻辑。加了 stopPropagation 后，点按钮只执行折叠，点卡片空白处才跳转。
