stopPropagation()用于精准截断事件冒泡路径，防止父元素监听器被触发；在React中需在事件处理函数内正确调用，避免顺序错误或空处理，且不可与preventDefault()混淆。
用 stopPropagation() 可以让当前事件停止向父元素传递，从而避免嵌套结构中多个点击处理函数被意外触发。关键不是“阻止所有事件”，而是精准截断冒泡路径。
理解冒泡机制是前提
默认情况下，点击子元素会依次触发：子元素 → 父元素 → 祖父元素……直到 document。比如一个按钮在弹窗内，弹窗本身有关闭逻辑，按钮有提交逻辑——不加控制时，点按钮可能同时触发提交和关闭。
调用 event.stopPropagation() 就像在事件路途中设了一个“路障”，之后的上级元素监听器不会再收到这次事件。
在 React 中正确使用 stopPropagation()
React 的事件是合成事件（SyntheticEvent），但 stopPropagation() 行为与原生一致。注意不要在箭头函数中直接写 onClick={e => e.stopPropagation()}，这样会吞掉事件却没执行业务逻辑。
- ✅ 正确写法：在事件处理函数内部调用
const handleClick = (e) => {
e.stopPropagation(); // 先阻断冒泡
console.log('按钮被点了，但弹窗不会关闭');
// 后续业务逻辑...
};
- ❌ 错误写法：空处理或顺序颠倒
// 这样按钮点击什么都不会发生
<button onClick={(e) => e.stopPropagation()} />
// 这样可能已触发父级逻辑，再阻断也没意义
const handleClick = (e) => {
doSomething();
e.stopPropagation(); // 太晚了
};
替代方案：用 currentTarget 区分点击目标
有时不需要阻断冒泡，只需判断事件真正发生在哪个元素上。利用 e.currentTarget（绑定监听器的元素）和 e.target（实际被点击的元素）可以做精准判断。
-
e.target是你点中的那个 DOM 节点（可能是子元素） -
e.currentTarget是你写onClick的那个组件/元素
例如弹窗根元素监听点击，只在点击空白区域时关闭：
const handleOverlayClick = (e) => {
if (e.target === e.currentTarget) {
closePopup(); // 点的是弹窗背景，不是里面按钮或输入框
}
};
注意 stopPropagation 和 preventDefault 的区别
这两个常被混淆，但作用完全不同：
-
stopPropagation()：阻止事件继续向上冒泡，不影响默认行为（如链接跳转、表单提交） -
preventDefault()：阻止元素默认行为，不影响事件传播（父级仍能收到）
需要同时禁用默认行为 + 阻止冒泡时，两个都要调用：
const handleLinkClick = (e) => {
e.preventDefault(); // 不跳转
e.stopPropagation(); // 不让父容器响应
// 自定义跳转逻辑...
}; 
