事件stoppropagation不使用表中的复选框

Question

我有一个带复选框和按钮的表格。我尝试在按钮中使用event.stoppropagation并且它工作正常，但是当我在复选框上设置完全相同的东西时，它不起作用。不知道怎么解决这个问题？代码如下：

<mat-table #table [dataSource]="dataSource" matSort  (matSortChange)="sortData($event)">
    <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef > No. </mat-header-cell>
          <mat-cell *matCellDef="let element" fxFlex="5" fxFlexOffset="2">
                  <mat-checkbox name="checkbox_data" id="checkbox_{{element.sid}}" [(ngModel)]="element.selected" (change)="checkIfAllSelected($event)"></mat-checkbox>
              </mat-cell>
    </ng-container>
    <ng-container matColumnDef="unit_num">
        <mat-header-cell *matHeaderCellDef  mat-sort-header="unit_num"> Unit No. </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.unit_num}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="unit_type">
        <mat-header-cell *matHeaderCellDef mat-sort-header="unit_type"> Unit Type </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.unit_type}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="shares">
        <mat-header-cell *matHeaderCellDef mat-sort-header="shares"> Shares </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.shares}} </mat-cell>
      </ng-container>
    <ng-container matColumnDef="sections">
        <mat-header-cell *matHeaderCellDef>Section </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sections.section_type}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="buildings">
        <mat-header-cell *matHeaderCellDef >Building </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.buildings.buildingname}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="actions_delete">
                    <mat-header-cell *matHeaderCellDef fxFlex="3" fxFlexOffset="2" mat-sort-header> {{ 'Actions' | TranslateText }} </mat-header-cell>
                    <mat-cell *matCellDef="let element"fxFlex="3" fxFlexOffset="2">
                            <button mat-raised-button color="primary" (click)="deleteStaff($event, element.sid)">{{'Delete' | TranslateText}}</button>
                    </mat-cell>
                  </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns; let index=index;" mat-ripple style="position:relative;" (click)="edit(row._id,$event)"></mat-row>
    </mat-table>

这两个函数都有event.stopPropagation（）;在他们中间。