MUI表格可点击行内图标按钮点击事件冲突问题求助

问题本质是DOM事件冒泡机制：点击IconButton时，事件会沿着DOM树向上传播，触发父元素TableRow的onClick事件。要实现点击行为分离，只需在IconButton的点击回调中阻止事件冒泡即可。

修改IconButton的代码，添加event.stopPropagation()：

<TableCell>
  <Tooltip title='Survey options'>
    <IconButton
      onClick={(event) => {
        event.stopPropagation(); // 阻止事件向上传递到TableRow
        console.log('button clicked!');
      }}
    >
      <MoreHoriz />
    </IconButton>
  </Tooltip>
</TableCell>

这样点击IconButton时，只会执行按钮自身的逻辑，不会触发TableRow的handleRowClick；点击表格行其他区域时，依然会正常触发行的点击事件。

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