父元素和子元素同时可点击时，点击会冒泡触发两次事件；应通过event.stopPropagation()阻止冒泡或在父元素中用event.target.matches()过滤来源，确保行为与视觉反馈一致。
父元素和子元素同时可点击时，点击行为会冒泡，不加干预就会触发两次事件——这是最常被忽略的根源问题。
为什么子元素点击会连带触发父元素事件
浏览器默认启用事件冒泡机制：click 从目标元素（比如 button）逐层向上传到 div.parent，再往上到 body。只要父元素绑了 addEventListener('click', ...)，就一定会收到。
- 常见错误现象：点一个删除图标，结果整个卡片跳转了
- 检查方法：在父元素回调里打
console.log(event.target)，看实际点击的是谁 - 关键区别：
event.target是真正被点击的 DOM 节点，event.currentTarget才是当前绑定事件的那个节点
阻止冒泡但别误杀其他交互
在子元素的事件处理函数中调用 event.stopPropagation() 可中断冒泡，但要注意副作用：
- 如果父元素还监听了
mouseenter或focus等不冒泡的事件，它不受影响 - 如果子元素内部还有更深层的按钮（比如图标里的
svg），只在最外层子元素上 stopPropagation 就够了 - 别在父元素上用
event.stopImmediatePropagation()——它会阻止同一事件类型下其他监听器执行，容易破坏第三方库逻辑 - 示例：
document.querySelector('.delete-btn').addEventListener('click', function(e) { e.stopPropagation(); // 执行删除逻辑 });
用 event.target 判断点击来源更稳妥
比起层层 stop，直接在父元素事件里做来源过滤，更灵活也更安全：
立即学习“前端免费学习笔记（深入）”；
- 适合场景：卡片整体可点击跳转，但里面的按钮、链接、开关要各自响应
- 写法要点：用
event.target.matches('.action-btn, .toggle')或event.target.classList.contains('ignore-parent') - 注意不要只靠
tagName判断，span和svg都可能包裹在按钮内，应优先查 class 或 data 属性 - 性能无负担：现代浏览器对
matches()优化很好，比遍历祖先节点快得多
父子都设 cursor: pointer 但行为不同，用户会困惑
视觉反馈和实际行为必须一致，否则就是 UX 隐患：
- 如果只有子元素可操作，父元素就不该加
cursor: pointer，哪怕它绑了事件（防止误导） - 如果父元素点击有明确用途（如展开/收起），建议加
tabindex="0"并支持键盘Enter，否则屏幕阅读器用户无法感知 - 移动端要额外考虑
touchstart与click的 300ms 延迟差异，click绑定在div上可能响应滞后，优先用touchend+preventDefault
真正麻烦的不是技术实现，而是判断“这里到底该谁响应”——UI 设计稿没定义清楚点击边界时，前端得主动拉产品对齐，而不是自己猜。
