Material UI ListItem子元素点击触发父onClick的原因及阻止方法

AI 小北

2026-8-11

问题

使用MUI的<List>组件时，点击ListItem的子组件（如删除IconButton、ListItemAvatar）时，ListItem自身的onClick回调（handleNavigate）也会被触发。示例中，点击绑定handleDelete的删除按钮、绑定handleValidate的头像时，父组件的handleNavigate均会触发。

代码示例

<List>
  <ListItem
    onClick={handleNavigate}
    secondaryAction={
      <IconButton edge="end" aria-label="delete" onClick={handleDelete}>
        <DeleteIcon />
      </IconButton>
    }
  >
    <ListItemAvatar onClick={handleValidate}>
      <Avatar>
        <FolderIcon />
      </Avatar>
    </ListItemAvatar>
    <ListItemText
      primary="Single-line item"
    />
  </ListItem>
</List>

原因

这是DOM事件冒泡导致的：当点击子组件时，点击事件会从触发的子元素开始，沿着DOM树向上传播，最终触发父级ListItem的onClick回调。

解决方案

通过在子组件的事件处理函数中阻止事件冒泡即可解决：

1. 修改子组件的回调函数

在handleDelete和handleValidate中调用event.stopPropagation()，中断事件向上传播：

const handleDelete = (event) => {
  event.stopPropagation(); // 阻止事件冒泡到父级ListItem
  // 此处添加你的删除逻辑
};

const handleValidate = (event) => {
  event.stopPropagation(); // 阻止事件冒泡到父级ListItem
  // 此处添加你的验证逻辑
};