javascript - 角度材料复选框:检查标签中的链接时防止波纹
问题描述
我有一个 Angular (10) Material 复选框,标签中有一个链接,该链接有一个点击处理程序来打开一个包含参考信息的对话框:
<mat-checkbox formControlName="certification">
By checking this box, I certify that all shipment information provided is correct and I agree to adhere to the
<span class="fake-link" (click)="openUspsPrivacyAgreement($event)"> USPS Privacy Act Statement </span> and all
other country-specific requirements.
</mat-checkbox>
我的点击处理程序是
openUspsPrivacyAgreement(event: MouseEvent) {
this.dialogService.open(DialogUspsPrivacyAgreementComponent);
event.preventDefault();
event.stopPropagation();
}
它的工作原理是打开对话框并且未选中复选框,这就是我想要的。
但是,无论如何都会在复选框上触发涟漪。有没有办法在我点击我的文本时防止涟漪但在点击复选框时它可以工作?
我认为我所做的就足够了,因为它确实阻止了点击进入复选框并选中它。
解决方案
添加
<mat-checkbox>Checked 1</mat-checkbox>
到源代码中的 app.component 并且它仍然具有“悬停”效果,可以通过 CSS 将其禁用。
解决方法是:
.mat-ripple { display: none; }
或.mat-checkbox-ripple
仅用于复选框
推荐阅读
- javascript - React / ES6 Onscroll功能未在Y方向触发
- excel - 查找今天之后与日期编号和工作日匹配的第一个日期
- html - 当我使用 *ngFor 时,如何保存单选按钮单击?
- c# - 需要帮助将 winform 迁移到 net 5
- yii2 - Yii2:将行为附加到每个控制器
- java - Spring HttpClientErrorException 和 RestClientException 获取请求 URL
- javascript - 对代码进行更改后清理缓存的解决方案?
- html - 如何在调整窗口大小时使元素消失
- android - 如何在android中调用其他应用程序的后退按钮上的点击
- android - Firebase 验证码检查失败并阻止用户进行身份验证