我的按钮被材料 ui 头像图像 onClick 覆盖答案

【问题标题】：My button is getting override by an material ui avatar image onClick我的按钮被材料 ui 头像图像 onClick 覆盖
【发布时间】：2022-02-14 10:07:11
【问题描述】：

每当制作一个应该包含图像的简单类别过滤器时，我都会遇到一个错误。当我控制台日志时，结果是我的 img 按钮被单击并作为图像被触发，但是当在边缘单击时，按钮被触发并执行我想要它执行的操作。我不能让用户遇到这个错误，请帮助。

我的代码：

...
                <Fab
                    key={id}
                    variant="extended"
                    size="medium"
                    color="info"
                    aria-label="add"
                    value={id}
                    onClick={(e) => handleChange(e.target.value)}
                >
                    <Avatar alt={name} src={icon} />
                </Fab>

...

有没有更好的方法来设计这个用户界面？还是我缺少什么？

【问题讨论】：

标签： html user-interface material-ui next.js

【解决方案1】：

也许您遇到了图像捕获事件的问题。我建议你在 CSS 上测试一些东西。

1 - 在您的 CSS 文件中创建一个类 avatar。

.avatar {
  pointer-events: none;
}

2 - 将此类添加到您的组件中。

<Avatar className="avatar" ...

当你将 CSS 指针事件设置为 none 时，这意味着 Avatar 组件不会注册它，它会让事件通过。

【讨论】：