stopPropagation()须在事件目标阶段或捕获阶段末尾立即调用才有效，异步中无效；React中需用e.stopPropagation()而非return false，且不可混淆preventDefault()。
用 stopPropagation() 阻止事件冒泡，关键在于**在事件处理函数中及时调用它**，且必须在事件传播到父元素之前执行。
什么时候调用才有效
只有在事件处于捕获阶段末尾或目标阶段、且尚未进入冒泡阶段时调用，才能真正拦截后续的冒泡行为。一旦事件已开始向上触发父级监听器，再调用就无效了。
- 推荐在事件回调函数开头立即调用，避免逻辑干扰或条件判断延迟
- 注意：不能在异步操作（如
setTimeout、Promise.then）里调用，那时事件早已完成传播 - 原生事件和 React 合成事件都支持，但 React 中需用
e.stopPropagation()，不是return false
常见误用场景
很多人以为加了 stopPropagation() 就万事大吉，其实容易踩坑：
- 给动态插入的元素绑定事件，但没用事件委托，导致新元素上没绑定函数，自然不会执行
stopPropagation() - 多个事件监听器叠加，只在其中一个里调用了，其他监听器仍会继续冒泡
- 混淆
stopPropagation()和preventDefault()：前者管“传不传上去”，后者管“点链接跳不跳转”
一个可靠的小例子
点击按钮，阻止它触发外层 div 的点击事件：
<div id="outer">
Outer
<button id="inner">Click me</button>
</div>
<script>
document.getElementById('outer').addEventListener('click', () => {
console.log('Outer clicked');
});
document.getElementById('inner').addEventListener('click', (e) => {
e.stopPropagation(); // ✅ 立即调用
console.log('Button clicked');
});
</script>
点击按钮后，控制台只输出 Button clicked，Outer clicked 不会出现。
React 中要注意的细节
React 使用合成事件系统，事件对象是池化的，但 stopPropagation() 依然可用：
- 直接写
e.stopPropagation()即可，不需要额外配置 - 不要用
return false，它在 React 中不起阻止冒泡作用 - 如果需要同时阻止默认行为和冒泡，两个方法都要显式调用：
e.preventDefault(); e.stopPropagation();
