表格中Checkbox的event.stopPropagation无效，按钮正常，求解决方案

我之前也碰到过一模一样的情况——按钮上的stopPropagation用得好好的，Material的Checkbox就是不生效。核心原因在于Angular Material的<mat-checkbox>组件内部对点击事件做了封装处理，直接在组件标签上绑定事件的时机可能晚于内部事件的冒泡，或者事件是从内部原生<input>元素触发后冒泡上来的，导致常规的阻止冒泡逻辑没起作用。

下面给你几个经过验证的可行方案：

方案1：在Checkbox的点击事件中直接阻止冒泡 #

直接在<mat-checkbox>标签上绑定(click)事件调用stopPropagation，注意别用(change)事件（change是值变更事件，触发时机晚于冒泡，没法阻止行/单元格的点击事件）：

<mat-cell *matCellDef="let element">
  <mat-checkbox (click)="$event.stopPropagation()" [(ngModel)]="element.selected"></mat-checkbox>
</mat-cell>

如果上面的方法还是没效果，可以试试绑定(mousedown)事件——mousedown的触发时机早于click，能更早截断事件冒泡：

<mat-checkbox (mousedown)="$event.stopPropagation()" [(ngModel)]="element.selected"></mat-checkbox>

方案2：通过组件类处理事件逻辑 #

如果模板内联代码不够可靠，把事件处理逻辑放到组件类里，确保逻辑被执行：

模板代码 #

<mat-cell *matCellDef="let element">
  <mat-checkbox (click)="handleCheckboxClick($event)" [(ngModel)]="element.selected"></mat-checkbox>
</mat-cell>

组件类代码 #

handleCheckboxClick(event: MouseEvent): void {
  // 明确阻止事件冒泡到父元素（行/单元格）
  event.stopPropagation();
  // 若需要阻止事件向组件内部其他监听函数传播，可再加这行
  // event.stopImmediatePropagation();
}

方案3：检查父元素的事件绑定 #

有时候问题出在父元素的事件逻辑上，比如你的表格行（<mat-row>）或单元格（<mat-cell>）绑定了(click)/(mouseup)这类事件，你需要对应地在Checkbox上绑定相同的事件来阻止冒泡。

举个例子：如果行用的是(mouseup)="onRowClick(row)"，那Checkbox上就要绑定(mouseup)="$event.stopPropagation()"。

最后给你补全包含Checkbox列的完整表格示例：

<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)">
  <!-- ID列 -->
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element" fxFlex="5" fxFlexOffset="2"> {{element.id}} </mat-cell>
  </ng-container>

  <!-- Checkbox选择列 -->
  <ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef>
      <mat-checkbox (click)="$event.stopPropagation()" [(ngModel)]="selectAll"></mat-checkbox>
    </mat-header-cell>
    <mat-cell *matCellDef="let element">
      <mat-checkbox (click)="$event.stopPropagation()" [(ngModel)]="element.selected"></mat-checkbox>
    </mat-cell>
  </ng-container>

  <!-- 其他列... -->

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClick(row)"></mat-row>
</mat-table>

这样修改后，点击Checkbox就不会触发行的onRowClick事件了，和按钮的效果完全一致。

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