React中如何阻止<a>标签内点击按钮时触发链接跳转？

针对你给出的组件结构，有两种简单的方法可以实现点击cta-button时阻止外层card链接的跳转：

方法一：在按钮点击事件中阻止冒泡与默认行为 #

直接在handleOnClick函数中调用事件对象的stopPropagation()和preventDefault()方法，阻止事件冒泡到外层<a>标签，同时阻止链接的默认跳转行为：

const handleOnClick = (e) => {
  // 阻止事件向上冒泡到父级的<a>标签
  e.stopPropagation();
  // 强制阻止<a>标签的默认跳转行为（双重保险）
  e.preventDefault();

  // 这里编写你的CTA按钮业务逻辑
  console.log('执行CTA按钮操作');
};

修改后的组件结构（保留原结构，仅更新事件处理）：

<a href="www.example.com" className="card">
    <div className="image-wrapper">
        <div className="image">...</div>
        <div className="cta-button" onClick={handleOnClick}>cta</div>
    </div>
    <div className="title">title</div>
</a>

方法二：在外层链接的点击事件中判断目标元素 #

如果不想修改按钮的事件处理逻辑，可以给外层<a>标签添加点击事件，判断点击的目标是否是cta-button（或其后代元素），若是则阻止跳转：

<a 
  href="www.example.com" 
  className="card"
  onClick={(e) => {
    // 检查点击目标是否属于cta-button元素
    if (e.target.closest('.cta-button')) {
      e.preventDefault();
    }
  }}
>
    <div className="image-wrapper">
        <div className="image">...</div>
        <div className="cta-button" onClick={handleOnClick}>cta</div>
    </div>
    <div className="title">title</div>
</a>

说明 #

• 方法一更推荐，逻辑直接，仅在按钮点击时触发阻止操作，性能和可读性更好。
• stopPropagation()用于阻止事件冒泡到父元素，避免<a>标签接收到点击事件；preventDefault()则直接阻止链接的跳转默认行为，两者结合可确保在各种场景下生效。

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