mat-menu内mat-checkbox使用$event.stopPropagation()无效，如何保持菜单展开？

先修正代码中的语法错误 #

你的HTML代码存在引号未闭合问题，会导致DOM渲染异常，影响事件绑定逻辑：

• test-id="column-properties-btn 需改为 test-id="column-properties-btn"
• test-id="column-filter-btn 需改为 test-id="column-filter-btn"

可行解决方案 #

方案1：阻止mousedown事件冒泡（最可靠）

Angular Material的mat-menu关闭逻辑绑定在mousedown事件上，而非click事件，之前的click阻止方式无效。修改如下：

1. 调整HTML中的事件绑定：

<div (mousedown)="$event.stopPropagation()" *ngFor="let column of userSettings">
  <mat-checkbox [hidden]="column.columnName==='context'"
                [checked]="column.isSelected"
                (mousedown)="toggleColumn(column, $event)">
    {{column.columnName}}
  </mat-checkbox>
</div>

2. 对应更新TS中的方法：

toggleColumn(column: ColumnInfo, $event: MouseEvent): void {
  $event.stopPropagation();
  column.isSelected = !column.isSelected;
}

方案2：禁用子菜单的点击关闭行为（Angular Material 15+）

若你的Angular Material版本为15及以上，直接给包含checkbox的子菜单设置[closeOnClick]="false"，点击内部元素不会触发菜单关闭：

<mat-menu #filtermenu="matMenu" class="ps-ctx-no-padding filter-menu"
          test-id="column-filter-menu"
          [closeOnClick]="false">
  <!-- 原checkbox代码保持不变 -->
</mat-menu>

注：该设置会让整个子菜单点击都不关闭，若需关闭菜单，可给按钮添加手动关闭逻辑（比如重置按钮）。

方案3：用mat-menu-item包裹checkbox并阻止默认行为

将checkbox放入mat-menu-item内，同时阻止菜单项的点击事件冒泡和默认行为：

<mat-menu #filtermenu="matMenu" class="ps-ctx-no-padding filter-menu"
          test-id="column-filter-menu">
  <mat-menu-item (click)="$event.stopPropagation(); $event.preventDefault()"
                 *ngFor="let column of userSettings"
                 [hidden]="column.columnName==='context'">
    <mat-checkbox [checked]="column.isSelected"
                  (change)="toggleColumn(column)">
      {{column.columnName}}
    </mat-checkbox>
  </mat-menu-item>
</mat-menu>

这里改用(change)事件处理checkbox状态切换，避免和菜单项的点击事件冲突。

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