如何解决通过单击其标签来防止选中 mat-checkbox
我需要通过点击标签来阻止选中复选框。
我使用角材料复选框。
我使用 preventDefault()
方法部分设法做到了,但如果我点击标签,复选框仍会显示焦点样式。
我需要的是:如果我点击标签,复选框不会发生任何变化(未选中,未聚焦)。
请查看此 stackblitz 链接以更好地了解我的问题:https://stackblitz.com/edit/angular-2zyvdp?file=src%2Fapp%2Fcheckbox-overview-example.html
解决方法
如果你不想改变涟漪行为或 CSS,试试这个:
<span (mousedown)="$event.stopPropagation()" (click)="check($event)">
Check me!
</span>
涟漪效应是由 mousedown 事件触发的(因此您在使用空格键时看不到它们),您需要使用 stopPropagation()
,因为 preventDefault()
在这里是不够的.
StackBlitz 链接 here
,在 style.css 中添加以下 css 并检查
span.mat-ripple.mat-checkbox-ripple.mat-focus-indicator {background: none !important;opacity: 0 !important;}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。