Angular 防止默认的奇怪行为

Question

在我的项目中，我使用 ngx-context 库，它只是显示菜单，但是，当单击其中的某个位置时，它会关闭。这就是为什么我决定使用 event.preventDefault() + event.stopPropagation() 来修复它，但由于某种原因它的工作原理并不像我期望的那样工作

正如您在下面的代码中看到的，我在单击包裹在 mat-checkbox 周围的 div 时调用 selectPositioningType()。

      <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">
        </mat-checkbox>
        <span>{{positioningType.Name}}</span>
      </div>

在此函数内部，我正在调用 event.preventDefault()。我预计，由于冒泡 event.preventDefault() 只会影响 div，但是，当我通过精确单击来切换 mat-checkbox 时，即使在这种情况下不调用 selectPositioningType，它也不会更改其状态。只是好奇可以解释什么，冒泡不是应该从下到上进行吗？

顺便说一句，当使用经典的 html input[type=checkbox] 情况是一样的

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

Answer 1

您只需使用

<button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">
        <mat-icon>more_vert</mat-icon>
</button>