React带CIcon的CButton点击图标时e.target异常，如何统一触发按钮事件？

在项目中使用带CIcon的CButton组件时，外观正常但出现异常行为：点击按钮不同区域，onClick事件的e.target会返回不同元素——点击按钮空白角落时返回CButton实例，点击内部图标时返回polygon或SVG元素。需要实现无论点击按钮哪个区域，e.target都指向CButton，且确保误点按钮内的CIcon时，仅触发按钮的点击逻辑。

相关代码 #

按钮组件代码

<CButton
  color="danger"
  value={[name, name2, name3]}
  onClick={handleUnlink}>
  <CIcon icon={cilX} />
</CButton>

点击处理函数

const handleUnlink = (e) => {
   console.log(e.target)
};

以下是三种高效解决方法：

方法一：用e.currentTarget替代e.target #

currentTarget是事件绑定的原始元素（即CButton），不受点击子元素的影响，是最直接的解决方案：

const handleUnlink = (e) => {
   // 始终指向绑定onClick的CButton
   console.log(e.currentTarget);
   // 如需获取按钮的value属性，直接从currentTarget读取
   const targetValue = e.currentTarget.value;
};

方法二：给CIcon设置pointer-events: none #

通过CSS让图标元素不响应任何点击事件，点击会直接穿透到父级按钮：

<CButton
  color="danger"
  value={[name, name2, name3]}
  onClick={handleUnlink}>
  <CIcon icon={cilX} style={{ pointerEvents: 'none' }} />
</CButton>

如果需要全局生效，可在样式文件中添加：

.c-icon {
  pointer-events: none;
}

方法三：阻止CIcon的点击事件冒泡 #

给CIcon绑定点击事件并阻止冒泡，避免子元素的点击事件干扰父按钮的逻辑：

<CButton
  color="danger"
  value={[name, name2, name3]}
  onClick={handleUnlink}>
  <CIcon icon={cilX} onClick={(e) => e.stopPropagation()} />
</CButton>

内容的提问来源于stack exchange，提问作者J. Doe