当 Card 组件整体绑定 onClick 事件时，其子组件（如 CardBottom）内的按钮点击会触发父级事件；通过在子组件事件处理器中调用 event.stopPropagation()，可精准拦截事件冒泡，确保仅执行预期逻辑。
当 card 组件整体绑定 onclick 事件时，其子组件（如 cardbottom）内的按钮点击会触发父级事件；通过在子组件事件处理器中调用 `event.stoppropagation()`，可精准拦截事件冒泡，确保仅执行预期逻辑。
在 Fluent UI React 中，Card 组件常被用作可交互容器，但实际业务中往往需要区分不同区域的交互行为：例如，整个卡片点击跳转详情页，而底部操作区（如“保存”按钮）应独立响应且不触发卡片级事件。默认情况下，DOM 事件遵循捕获→目标→冒泡阶段，子元素上的点击会沿 DOM 树向上冒泡至父 Card，从而意外触发 onClick={() => onClicked(id)}。
解决方法是在子组件（如 CardBottom）的事件处理器中显式中断冒泡链。关键不是禁用或移除父级事件，而是精准控制事件流。以 onSave 回调为例，需将其改造为接收原生 SyntheticEvent 或 React.MouseEvent 参数，并调用 stopPropagation()：
<Card
className={mergeClasses(styles.card, className)}
onClick={() => onClicked(id)}
>
<CardContent {...props} />
<CardBottom
{...props}
onSave={(event: React.MouseEvent) => {
event.stopPropagation(); // ✅ 阻止事件继续向上传播到 Card
onSaved(id);
}}
/>
</Card>⚠️ 注意事项：
- 必须确保 onSave 的事件处理器签名与实际触发方式匹配（如 CardBottom 内部是 <button onClick={...}>，则 event 类型为 React.MouseEvent<HTMLButtonElement>）；
- 不要使用 event.preventDefault() 替代 —— 它仅阻止默认行为（如表单提交），无法阻止事件冒泡；
- 若 CardBottom 内含多个可点击元素（如多个按钮），需对每个相关事件处理器均添加 stopPropagation()；
- 在 TypeScript 项目中，建议显式标注事件类型以获得更好的类型安全和 IDE 提示。
总结：stopPropagation() 是处理嵌套交互组件事件冲突的标准实践。它轻量、可靠，且完全符合 React 事件系统的设计理念——不修改事件绑定结构，仅在运行时动态调控事件流向，兼顾可维护性与用户体验。
