如何使带onClick的产品父容器内的加购按钮不受父点击事件影响？

这是事件冒泡导致的问题：点击内部按钮时，事件会顺着DOM层级向上传递，触发父容器的onClick跳转逻辑。只需在按钮的点击事件里阻止事件冒泡，就能让按钮的操作独立于父容器。

修改后的代码如下：

<div onClick={() => navigate(product.id)}>
  <button onClick={(e) => {
    // 阻止事件向上冒泡，避免触发父容器的点击事件
    e.stopPropagation();
    add(product.id);
  }}>Add to Cart</button>
</div>

补充说明 #

• 不管是函数组件还是类组件，核心逻辑一致，都是在按钮的事件处理函数中调用event.stopPropagation()。
• 若按钮本身带默认行为（比如表单提交按钮），可以额外调用e.preventDefault()阻止默认行为，但此场景下仅需阻止冒泡即可。

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