子按钮点击触发整行卡片跳转是因事件冒泡，应在子按钮点击处理中调用event.stopPropagation()阻止冒泡；避免误用preventDefault()；若卡片用标签包裹，建议改用或抽离按钮；还需保障可访问性。

子按钮点击时触发整行卡片跳转，本质是事件冒泡导致的——子按钮的点击事件向上传播到了父级卡片（带 a 标签或 onclick 的容器），从而执行了跳转。解决的核心就是**在子按钮的点击处理中阻止事件冒泡**，同时确保不影响其自身功能。

✅ 正确阻止冒泡：用 event.stopPropagation()

这是最直接、最可靠的方式。在子按钮的点击事件回调中调用该方法，可切断事件向父元素的传播路径：

• 如果是原生 JS：`button.addEventListener('click', function(e) { e.stopPropagation(); /* 你的逻辑 */ });`
• 如果是 Vue：`删除`（`.stop` 修饰符即自动调用 stopPropagation）
• 如果是 React：` { e.stopPropagation(); handleSubAction(); }}>编辑`

⚠️ 注意别误用 event.preventDefault()

preventDefault 是阻止默认行为（比如表单提交、链接跳转），但它**不阻止冒泡**。单独用它无法解决本问题——卡片跳转可能被拦住，但若父层还有其他监听器（如统计埋点），仍会被触发。只有和 stopPropagation 配合，或明确只需禁用默认行为时才用它。

? 检查卡片容器是否用了 标签

如果整行卡片是用 `` 包裹的，浏览器对 `` 内点击有特殊处理：即使子元素阻止了冒泡，某些旧版浏览器或特定结构下仍可能触发跳转。更稳妥的做法是：

• 改用 `
  ` 替代 ``，获得可控性
• 或确保子按钮不在 `` 内部——把按钮抽离到卡片外（如绝对定位），再用 CSS 视觉上“放在”卡片上

? 补充技巧：语义化 + 可访问性

阻止跳转后，要保证子按钮依然可聚焦、可键盘操作（如回车触发）：

• 给按钮加 tabindex="0"（若非原生 button 元素）
• 用 role="button" 告诉屏幕阅读器这是个按钮
• 监听 keydown 事件响应空格/回车键，保持交互一致性