使具有onClick免疫功能的父级的子元素

Question

因此，我有一个要单击的产品包装器，然后单击将用户重定向到该产品的特定页面。里面是一个按钮，可以将产品添加到购物车中，但问题出现在这里，因为包装器有onCLick，当我单击该按钮时，会调用父onClick，因此我不知道如何使该按钮对div的onCLick免疫。

<div onClick={() => navigate(product.id)}>
  <button onClick={() => add(product.id)>Add to Cart</button>
</div>

Answer 1

当调用子事件的onClick事件时，该事件默认传播并调用父事件的onClick。

为了避免这种情况，您应该在子函数中调用event.stopPropagation()。

<button onClick={(event)=>{event.stopPropagation(); /* rest of your code */}}>