Angular prevent默认的奇怪行为

问：

在我的项目中，我使用的是 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));
}