如何阻止点击IonItem内部可点击元素时触发其onClick事件？

这是很常见的事件冒泡问题——当你点击子元素（IonIcon）时，浏览器会把这个点击事件沿着DOM树向上传递，最终触发父元素（IonItem）的onClick回调。不过解决起来很简单，只需要在图标的点击事件里阻止事件冒泡就行！

你只需要修改IonIcon的onClick处理函数，添加event.stopPropagation()：

<IonItem button key={d._id} onClick={() => onClick(d._id)}>
  <IonLabel>{d.name}</IonLabel>
  <IonIcon 
    icon={trashOutline} 
    color="white" 
    onClick={(e) => {
      e.stopPropagation(); // 阻止事件向上冒泡到父元素
      onRemove(d._id);
    }} 
  />
</IonItem>

原理说明 #

stopPropagation()是浏览器DOM事件的标准方法，它会终止事件的传播过程，让事件不会传递到父级元素。这样点击图标时，只会执行onRemove逻辑，父元素的onClick就不会被触发了。

这个方法适用于所有基于React的Ionic项目，和组件嵌套方式无关，不用折腾嵌套IonItem的方案~

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