React中如何阻止点击子元素时触发父元素的onClick事件？

问题分析 #

给父div绑定了跳转的onClick事件后，绝对定位的SVG点击时会触发父元素的跳转，且尝试stopPropagation()无效，大概率是因为没给SVG绑定对应点击事件来阻止冒泡，或是事件对象未正确传递。

解决方案 #

方法1：给SVG绑定点击事件并阻止冒泡 #

直接给SVG添加onClick事件，在事件处理函数中调用e.stopPropagation()，阻止事件向上冒泡到父div：

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

如果SVG本身不需要任何默认交互行为，也可以同时加上e.preventDefault()，不过一般仅阻止冒泡即可满足需求。

方法2：禁用SVG的点击事件（无交互需求时） #

如果SVG只是装饰元素，不需要响应任何点击操作，可以通过CSS设置pointer-events: none，让SVG不接收点击事件。注意：若SVG覆盖的是父div的区域，该方法可能不生效（点击会穿透到父div），因此更推荐方法1。

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

为什么之前的stopPropagation()无效？ #

• 未给SVG绑定点击事件：stopPropagation()必须在触发该元素的事件处理函数中调用才会生效；
• 未正确传递事件对象e：导致无法调用stopPropagation()方法。

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