解决Accordion事件冒泡问题，核心是用event.target精准识别点击位置、必要时调用stopPropagation()隔离交互，优先采用closest()委托定位并避免误用preventDefault()。
处理折叠面板（Accordion）中事件冒泡问题，核心是防止点击面板标题时，本应只触发展开/收起逻辑，却意外触发了父级或更外层元素的事件（比如整个卡片被点击跳转、页面滚动、或其他交互中断）。
明确事件目标：用 event.target 区分点击位置
折叠面板通常结构类似：
标题
内容
如果给 .accordion 绑定了点击事件（比如统计曝光），而用户点的是 .accordion-header，默认会冒泡上去。此时应检查 event.target 是否为真正想响应的元素：
- 在
.accordion-header的点击处理器中，直接处理展开逻辑，不依赖父级监听 - 若必须在父级监听（如统一事件委托），加判断：
if (event.target.classList.contains('accordion-header')) { ... }
阻止冒泡：只在必要时调用 event.stopPropagation()
仅当确认该点击**完全属于面板控制行为**，且不希望影响任何上层逻辑时才阻止冒泡。常见适用场景：
立即学习“Java免费学习笔记（深入）”；
- 标题内含按钮、开关或图标（如右箭头图标），点击图标只应切换状态，不触发标题整体事件
- 面板嵌套在可拖拽、可点击跳转的卡片中，需隔离交互边界
示例：
header.addEventListener('click', function (e) {if (e.target.matches('.accordion-toggle-icon')) {
e.stopPropagation(); // 点击图标时不冒泡
togglePanel();
}
});
优先使用 event.currentTarget 而非 event.target 控制范围
当采用事件委托（如给 .accordion 统一监听），event.target 是实际点击的最深子元素（可能是 span、i 或 text），而 event.currentTarget 始终是绑定事件的那个元素（即 .accordion）。更稳妥的做法是结合 closest() 定位操作对象：
const header = e.target.closest('.accordion-header');- 如果找到 header，再执行展开；否则忽略
- 这样既不用阻止冒泡，又能精准响应，兼容内部任意结构
避免误用 event.preventDefault()
preventDefault() 用于取消默认行为（如链接跳转、表单提交、滚动等），和冒泡无关。折叠面板一般没有默认行为，除非标题是 <a href="#"></a> 或 <button></button>。此时只需：
- 用
<button type="button"></button>替代<a href="#"></a>，从根源避免默认跳转 - 若必须用链接，只在该元素上
e.preventDefault()，无需影响冒泡
