event.stoppropagation()是组件级事件隔离的首选方式，因其仅切断当前事件向父级dom的冒泡路径，不干扰默认行为，也不影响同元素其他监听器执行，比return false或preventdefault()更精准可控。
直接结论：event.stopPropagation() 是最常用、最可控的组件级事件隔离手段，但必须配合正确的绑定位置和判断逻辑；盲目在 document 或 body 上监听 + 阻断，反而会破坏可访问性与滚动性能。
为什么 stopPropagation() 是组件隔离的首选方式
它只切断当前事件向父级 DOM 的传播路径，不干扰默认行为（如链接跳转、表单提交），也不影响同一元素上其他监听器执行。这比 return false（等价于 preventDefault() + stopPropagation()）或单独用 preventDefault()（只拦默认行为，不管冒泡）更精准。
- 典型误用：给按钮加
onclick="return false"想防重复点击，结果连外层卡片展开逻辑也失效了 - 正确写法必须在事件处理函数内部调用：
e.stopPropagation()，且不能放在setTimeout或Promise.then里——那时冒泡早已完成 - IE9 及更早需补
e.cancelBubble = true，但现代项目基本不用考虑
Shadow DOM 内部事件怎么真正“透出”到外部
原生事件（click、input）默认不会穿透 Shadow boundary，event.target 总是指向宿主元素（比如 <my-button></my-button>），不是内部真实的 <button></button>。
- 获取真实触发节点要用
e.composedPath()[0]，而不是e.target - 想让外部监听到组件内操作，必须手动派发自定义事件：
element.dispatchEvent(new CustomEvent('submit', { bubbles: true, composed: true })) - 漏掉
composed: true是最常见错误——事件发出去了，但卡在 shadow boundary，外部完全收不到 -
<slot></slot>投影进来的内容，其事件仍受 Shadow DOM 规则约束，不能靠样式伪类::slotted(*)改变行为
事件委托时如何避免“越界拦截”
组件内部用委托处理子项点击（比如列表里的删除按钮），但又不想影响外层容器的滚动、拖拽或全局快捷键，关键在于“拦截点要够低、判断要够准”。
- 别在
document或body上绑click后再用stopPropagation()—— 这等于先让事件跑完整条路径再截停，低端机上查找耗时可能超 15ms，连续点击就卡顿 - 应绑定在组件根容器上，例如
shadowRoot.querySelector('.control-panel')，再用e.target.closest('[data-action="delete"]')精准匹配 - 避免同时监听
click和touchstart—— iOS 可能触发两次；滚动容器上若需e.preventDefault()，务必加{ passive: false }，但绝不要设在document上 - 如果父容器用了
innerHTML = ''或replaceChildren()重绘，委托监听器就断了，得重新绑定
动态插入元素后事件不生效？先查这三件事
事件委托本该自动覆盖新节点，不生效说明底层链路断了。
- 确认新元素确实是
appendChild()或insertAdjacentElement()到你委托的那个父容器下，不是插到别的节点里 - 检查是否用了
outerHTML替换整个父容器——这会销毁原节点及绑定的监听器 - 如果用
template.innerHTML插入，确保没漏掉content.cloneNode(true)，否则事件绑定可能丢失
真正难的不是写 stopPropagation() 这一行，而是判断“该不该拦、拦到哪一层、拦完会不会断掉别人依赖的冒泡链”。尤其在复合组件或跨框架集成时，随意拦截容易让焦点管理、无障碍支持、全局状态同步全乱套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
