React中点击卡片图标时阻止Link跳转的问题排查

问题本质 #

<Link> 本质是封装了原生 <a> 标签，点击它内部的任何子元素都会触发 <a> 的默认跳转行为——这不是事件冒泡导致的，而是标签本身的默认行为。你之前用 stopPropagation() 无效，是因为这个方法只能阻止事件向上冒泡，无法取消 <a> 标签的跳转默认行为。

你提到用 e.preventDefault() 会阻止背景色切换，大概率是逻辑执行顺序或写法问题，preventDefault() 只会取消默认跳转，不会影响你自己的业务逻辑。

正确解决代码 #

修改点击事件处理函数，先阻止默认跳转，再执行背景色切换逻辑：

function handleFavClick(event) {
  // 先阻止Link的跳转默认行为
  event.preventDefault();
  // 这里执行你的背景色切换逻辑，比如修改state
  // 示例：setIsFav(prev => !prev);
  console.log('触发收藏/取消收藏，不跳转');
}

<Link to={`/movies/${movie.id}`} key={movie.id}>
  <div className="card" key={movie.id}>
    <img 
      src="/heart-icon.png"
      alt="heart icon"
      onClick={handleFavClick}
    />
    <img 
      src="/card-image.png"
      alt="original card image"
    />
  </div>  
</Link>

额外说明 #

如果你的背景色切换逻辑依赖于事件冒泡（比如父元素的事件监听），那 stopPropagation() 才会有影响，但从你的代码看，切换逻辑应该是独立的，所以只需要 preventDefault() 就足够。

另外，也可以考虑把图标移出 <Link> 标签，通过绝对定位覆盖在卡片上，这样点击图标不会触发Link的任何事件，但这种方式需要调整布局样式，不如修改事件处理函数直接。

内容的提问来源于stack exchange，提问作者Hi - P