正确做法是仅调用 event.stopPropagation() 阻止冒泡而不调用 preventDefault()，以确保超链接正常跳转；若需区分子元素行为（如图标删除、文字跳转），应通过 event.target 判断并分别处理。
在组件中绑定点击事件时，既要允许超链接正常跳转，又要阻止事件冒泡到父级（比如防止触发卡片整体跳转），关键在于不阻止默认行为，只调用 event.stoppropagation()。
只阻止冒泡，不阻止默认行为
超链接（<a href="..."></a>）的跳转依赖于浏览器对 click 事件的默认行为。如果你写了 event.preventDefault()，跳转会失效——这是常见错误。
正确做法是：仅调用 stopPropagation()，让链接自己完成跳转逻辑：
- ✅
event.stopPropagation()—— 阻断事件向父元素传播 - ❌ 不要写
event.preventDefault()—— 否则链接不会跳转 - ✅ 确保事件监听器绑定在
<a></a>上，或其子元素（如图标、文字）上
处理子元素点击时的典型场景
例如一个带图标的链接：<a href="/post/123"><span>文章</span><i class="icon-delete"></i></a>，你希望点击 <i></i> 时删除该条目，但不跳转；而点击文字区域仍要跳转。这时需区分目标：
- 监听
<a></a>的click，用event.target判断是否点在可交互子元素上 - 如果是删除图标，调用
stopPropagation()并执行删除逻辑，不调用preventDefault()（它不影响跳转，因为不是<a></a>本身被点击） - 如果点在文字区域，什么也不做，自然触发跳转
封装成可复用的轻量指令（类 React 场景）
在函数组件中，可以这样封装“防冒泡但不禁跳转”的行为：
const useStopBubble = (callback) => {
return (e) => {
e.stopPropagation(); // ✅ 关键：只冒泡
if (callback) callback(e);
};
};
// 使用示例
function LinkItem({ to, onDelete }) {
return (
<a href={to}>
<span>详情</span>
<button onClick={useStopBubble(onDelete)}>×</button>
</a>
);
}
注意：<button></button> 是内联元素，点击它不会触发 <a></a> 的跳转，所以还需确保它不干扰语义——更推荐用 <span role="button"></span> + 键盘支持，或把 onClick 放在 <a></a> 上并判断 e.target。
补充：CSS 层面辅助（避免误触）
有时视觉上按钮紧贴链接文字，容易误触发。可用 CSS 明确分离交互区域：
- 给操作按钮设
pointer-events: auto（确保响应） - 给链接设
display: flex; align-items: center;，留出安全间距 - 必要时加
tabindex="-1"和键盘事件支持，提升可访问性
