角材质图标按钮波纹但不触发点击 [英] Angular Material Icon Button ripples but doesn't fire click

问题描述

我注意到有角度的材质图标按钮在它们周围有某种边距，点击后会触发涟漪效果，但点击处理程序不会.

I'm noticing that angular material icon buttons have some sort of margin around them where upon click the ripple effect does trigger, but the click handler doesn't.

我已经在 Safari、Firefox、Chrome 和 Edge 中复制了这个(尚未测试其他浏览器)

I've reproduced this in Safari, Firefox, Chrome and Edge (haven't tested other browsers)

问题示例:https://stackblitz.com/edit/angular-xgyutl

这是@angular/material 中的错误还是我做错了什么?如果是这样，是否有任何方法可以确保在不触发点击处理程序的情况下不会触发涟漪?

Is this a bug in @angular/material or am I doing something wrong? If so, is there any way to make sure the ripple never fires without also firing the click handler?

推荐答案

你应该在按钮元素中绑定点击事件，而不是在图标中.将您的模板更改为:

You should bind the click event in the button element, not in the icon. Change your template to:

<button (click)="showHelp($event)" mat-icon-button>
   <mat-icon>help_outline</mat-icon>
</button>

这篇关于角材质图标按钮波纹但不触发点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！