React中嵌套Link与Button组件时如何阻止事件冒泡？

你遇到的问题是因为stopPropagation()仅阻止了React合成事件的冒泡，但无法拦截原生<a>标签的默认跳转行为。以下是几种可行的解决方案：

方案1：在按钮点击事件中同时阻止冒泡与默认行为 #

除了阻止事件冒泡，还需要调用preventDefault()来终止<a>标签的默认跳转逻辑：

<Link to={`/MovieDetail/${movie.id}`}>
    {/* 其他元素 */}
    <button
        onClick={(e) => {
            e.stopPropagation();
            e.preventDefault();
            window.open(`https://www.youtube.com/watch?v=${trailers[index]}`, '_blank');
        }}
    >
        Watch Now
    </button>
    {/* 其他元素 */}
</Link>

或者直接使用原生事件方法彻底阻止事件传播：

<button
    onClick={(e) => {
        e.nativeEvent.stopImmediatePropagation();
        window.open(`https://www.youtube.com/watch?v=${trailers[index]}`, '_blank');
    }}
>
    Watch Now
</button>

方案2：调整布局，将按钮移出Link组件 #

这是最符合语义化规范的方案，避免按钮嵌套在<a>标签内，从根源上消除事件冲突：

<div className="movie-item">
    <Link to={`/MovieDetail/${movie.id}`}>
        {/* 仅包裹需要触发跳转的元素：海报、标题等 */}
        <img src={movie.poster} alt={movie.title} />
        <h3>{movie.title}</h3>
    </Link>
    <button
        onClick={() => {
            window.open(`https://www.youtube.com/watch?v=${trailers[index]}`, '_blank');
        }}
    >
        Watch Now
    </button>
</div>

方案3：在Link的点击事件中判断目标元素 #

通过检测点击目标是否为按钮，动态决定是否阻止跳转：

<Link 
    to={`/MovieDetail/${movie.id}`}
    onClick={(e) => {
        // 检查点击元素是否是按钮或按钮的子元素
        if (e.target.closest('button')) {
            e.preventDefault();
        }
    }}
>
    {/* 其他元素 */}
    <button
        onClick={() => {
            window.open(`https://www.youtube.com/watch?v=${trailers[index]}`, '_blank');
        }}
    >
        Watch Now
    </button>
    {/* 其他元素 */}
</Link>

补充说明 #

单独使用stopPropagation()无效的原因：React的合成事件与原生DOM事件是分离的，stopPropagation()仅阻止合成事件向上冒泡，但原生<a>标签的默认跳转行为依然会被触发。

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