Angular Mat Table中点击特定单元格时禁用整行点击事件的方法

这个问题本质是事件冒泡在搞鬼：当你点击带有独立点击事件的单元格时，事件会沿着DOM树向上传播，触发父元素（也就是<tr>行）的点击事件。要实现点击单元格只触发getRecord(row)，同时不触发行的clickHandler(row)，只需要在单元格的点击事件里阻止事件冒泡即可。

具体修改步骤： #

在你的单元格<td>的点击事件中，添加$event.stopPropagation()，它会阻止事件继续向上传递给行元素。修改后的代码如下：

<ng-container matColumnDef="test">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> test </th>
  <td mat-cell *matCellDef="let row" (click)="getRecord(row); $event.stopPropagation()"> {{row.test}} </td>
</ng-container>

原理说明： #

$event.stopPropagation()是Angular中事件对象的方法，它会终止事件在DOM树中的传播——也就是说单元格的点击事件不会再传递到它的父元素（行），这样就只会触发单元格的getRecord(row)，而不会触发行的clickHandler(row)了。

验证效果： #

保持你的行点击事件不变：

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

现在点击test列的单元格时，只会执行getRecord(row)；点击表格其他单元格或行的空白区域时，依然会正常触发clickHandler(row)。

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