如何阻止底层元素触发点击？看板删除时页面误跳转问题

问题核心：你调用的e.stopPropagation()只能阻止事件向上冒泡，但Link的跳转是点击事件的默认行为，并非通过冒泡触发，因此这个方法无效。

解决步骤：

• 在删除按钮的onClick回调里添加e.preventDefault()，直接阻止当前点击事件的默认行为（即Link的跳转操作）
• 可保留e.stopPropagation()作为补充处理，但核心修复逻辑是preventDefault()

修改后的代码片段：

<div
  className="delete-board"
  id={String(props.id)}
  onClick={(e) => {
    try {
      e.stopPropagation();
      e.preventDefault(); // 新增此行阻止默认跳转行为
      alert('preventDefault added');
    } catch (err) {
      alert(err);
    }
    deleteBoard((e.target as HTMLElement).getAttribute('id')!)
  }}
>
  Delete board
</div>

额外优化建议：

• 可以考虑将Delete按钮移出Link标签外部，从结构上彻底避免触发Link的点击事件，逻辑更直观
• 若需保留当前布局，确保delete-board元素的点击事件优先处理并阻断默认行为

内容的提问来源于stack exchange，提问作者С М