如何处理a标签内部元素的onClick事件触发a标签href跳转问题

点击内部div触发a标签跳转是事件冒泡导致的：子元素的点击事件会默认向上传递给所有父级元素，最终触发了a标签的默认跳转行为。

你只需要在div的点击回调中阻止事件冒泡即可，修改后的代码如下：

<a href={productPath} target={openInNewTab ? '_blank' : '_self'}>
  <figure>
    <img src={imageBaseUrl() + img} alt={product.title} />
  </figure>
  {isFavorite ? (
    <div 
      className="remove-favorite" 
      onClick={(e) => {
        // 阻止事件向上冒泡到父级a标签
        e.stopPropagation();
        deleteCallBack(product.id);
      }}
    >
     Delete
    </div>
  ) : null}
</a>

这个方案不会影响a标签其他区域的正常点击跳转逻辑，仅隔离了删除按钮区域的点击事件传递。如果有特殊场景需要，你也可以额外添加e.preventDefault()避免其余默认行为触发。

内容的提问来源于stack exchange，提问作者S.M_Emamian