css - Angular 9 : Disable label checkbox (not the box)

Question

我需要它才能使复选框标签(隐私政策)的一部分可点击。这是片段:

    <div>
      <mat-checkbox required formControlName="privacyCheck" [checked]="false">
        <b style="color: crimson">*</b>Accetto la
        <i style="color: #770E0E" (click)="printDebug()">privacy policy</i>
        e i termini di condizione dell'utilizzo del servizio.
      </mat-checkbox>
    </div>

目前，如果我单击斜体文本(“隐私政策”)，我会得到 printDebug，但当然复选框将设置为“选中”。

我在 .mat-checkbox-layout .mat-checkbox-label span, 上使用 CSS 属性 pointer-events: none !important; 尝试了几种解决方案.mat-checkbox-layout .mat-checkbox-label，等等。

---

Answer 1

老式的怎么样stopPropagation() ？

_{我的回答有点太快了}

你需要做 preventDefault() , 因为 mat-checkbox 的内容将被放入 <label> 中如果您点击附加标签，浏览器的默认行为是选中一个复选框。

<i style="color: #770E0E" (click)="printDebug($event)">privacy policy</i>

printDebug(event: MouseEvent) {
  event.preventDefault();
  // ...
}

如果您正在使用 Material 的涟漪效果，它仍然会被触发。如果你不想要这个，你将不得不做一个 .stopPropagation()在鼠标按下时:

<i style="color: #770E0E" (mousedown)="$event.stopPropagation()" 
                          (click)="printDebug($event)">privacy policy</i>

stackblitz