如何在父级Link包含子按钮时阻止点击事件冒泡？

问题核心是事件冒泡：点击按钮时，事件会向上传递到父级Link组件，导致同时触发页面跳转和添加购物车操作。你可以通过阻止按钮事件的冒泡来分开处理两个逻辑：

• 修改按钮的点击事件，添加e.stopPropagation()阻止事件向上传递：

<Link className="product-item__link" to={`/products/${product.category}/${product.id}`} >
    <div className='product-item'>
        {/* 其他元素 */}
        <button 
            className="product-item__btn" 
            onClick={(e) => {
                e.stopPropagation(); // 阻止事件冒泡到父级Link
                addToCart(product);
            }}
        >
            Add to cart
        </button>
     </div>
</Link>

这样修改后：

• 点击按钮只会执行addToCart，不会触发Link的页面跳转
• 点击产品卡片的其他区域（按钮之外的部分），依然会正常触发Link的跳转

如果你的布局允许，另一种方案是把按钮移出Link组件的嵌套结构，这样天然就不会有事件冲突，但这种方式需要调整页面布局样式。

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