javascript - React 如何防止单击子级时触发父级的 onclick 事件？

Question

我已经在我的 div 上设置了 onClick 属性，单击该属性将导航到新页面。 svg 是绝对定位的。如何避免 svg 元素上的点击事件？

我已经尝试过 stopPropagation() 但它不起作用。

<div
  className={classes.container}
  onClick={() => navigate(`${props.productName}`)}
>
  <img src={props.image} alt="" />
  <svg></svg>
</div>

Answer 1

显而易见的答案是将其放在 div 之外。
但如果您确实做不到，您始终可以使用 CSS 来实现此目的。

尝试使用pointer-events

示例:

HTML -

<div
  className={classes.container}
  onClick={() => navigate(`${props.productName}`)}
>
  <img src={props.image} alt="" />
  <svg className='no-events'></svg>
</div>

CSS-

.no-events {
   pointer-events: none;
}