Angular中preventDefault异常：mat-checkbox点击状态不切换问题

核心原因 #

你碰到的问题本质是两个关键点：

1. preventDefault()的影响范围：不管事件处于冒泡还是捕获阶段，只要调用这个方法，就会阻止当前事件关联的所有默认行为——包括原生checkbox（或mat-checkbox底层的原生控件）的勾选切换动作。你在父级div的click事件里全局调用preventDefault()，哪怕点击的是checkbox，事件冒泡到div时也会把checkbox的默认勾选行为给阻止了。
2. 事件冒泡的传递逻辑：点击mat-checkbox时，事件会从内部元素逐层冒泡到父级div，触发你绑定的selectPositioningType方法，哪怕checkbox处于禁用状态，点击也会冒泡到div（只是方法里直接return，但preventDefault()已经执行了）。

解决方案 #

方案1：精准控制事件阻止逻辑 #

不要全局阻止默认行为和事件传播，只在点击非交互元素时阻止冒泡（防止菜单关闭），放开对checkbox默认行为的限制：

修改selectPositioningType方法：

selectPositioningType(positioningType: TagPositioningType, event: Event) {
  const target = event.target as HTMLElement;
  // 只有点击的不是checkbox或其内部元素时，才阻止事件冒泡（避免菜单关闭）
  if (!target.closest('mat-checkbox') && !target.closest('input[type="checkbox"]')) {
    event.stopPropagation();
  }

  if (positioningType.ID === this.DRTLSPositioningTypeID) {
    return;
  }
  this.uwbTagsPositioningOptions = {PositioningTypeID: positioningType.ID, UwbGatewayID: null};
  localStorage.setItem('savedTagPositioningType', JSON.stringify(this.uwbTagsPositioningOptions));
}

方案2：分离交互逻辑，单独处理Checkbox点击 #

把Checkbox的点击事件和父级div的点击事件分开，让Checkbox自己阻止冒泡，避免触发父级的方法：

修改模板：

<div style="width: 105%; padding: 0; margin: 0; display: flex; justify-content: center;gap: 5px"
     (click) = "selectPositioningType(positioningType, $event)">
  <mat-checkbox
    [checked] = "positioningType.ID === uwbTagsPositioningOptions.PositioningTypeID"
    [disabled] = "positioningType.ID === DRTLSPositioningTypeID"
    (click)="$event.stopPropagation()">
  </mat-checkbox>
  <span>{{positioningType.Name}}</span>
</div>

修改方法（去掉preventDefault()）：

selectPositioningType(positioningType: TagPositioningType, event: Event) {
  event.stopPropagation(); // 只阻止事件冒泡到菜单，防止关闭
  if (positioningType.ID === this.DRTLSPositioningTypeID) {
    return;
  }
  this.uwbTagsPositioningOptions = {PositioningTypeID: positioningType.ID, UwbGatewayID: null};
  localStorage.setItem('savedTagPositioningType', JSON.stringify(this.uwbTagsPositioningOptions));
}

这个方案里，点击Checkbox时，Checkbox自己的click事件阻止了冒泡到父级div，所以不会触发selectPositioningType，勾选行为正常；点击div其他区域时，触发方法并阻止冒泡，菜单不会关闭。

方案3：利用ngx-context内置配置（如果支持） #

部分上下文菜单库提供了控制内部点击是否关闭的选项，比如[closeOnClick]="false"，如果ngx-context有类似配置，直接设置即可，不用手动处理事件。

为什么原生Checkbox也有同样问题？ #

原生input[type="checkbox"]的勾选完全依赖点击事件的默认行为，和matCheckbox底层逻辑一致。父级div的preventDefault()会直接阻止这个默认行为，导致点击后状态不切换。

内容的提问来源于stack exchange，提问作者Iceneo