角度-按钮点击事件优先于行点击事件

Question

Having a table with rows, I can click on a row to access the details of one row via a seperate page. This is done via the [routerlink].

 <tr *ngFor="let setting of applicatieData.settings" [routerLink]="['/settings-edit', setting.id]">
    <td class="col-3">{{ setting.shortName | slice:0:10 }}</td>
    <td class="col-4">{{ setting.value }}</td>
    <th class="col-3"><button class="btn btn-info" type="button" (click)="toggleValue(setting.id)">Toggle</button></th>
    <td class="col-2" (contextmenu)="onrightClick($event, setting.id)"><i class="icon-ellipsis-vert"></i></td>
</tr>

I would like the 'Toggle' button click event to take priority over previously mentioned row click event. How can I do that?

The right click with the 'context menu' works fine.

Answer 1

you need to stop the event from bubbling up the dom tree.

<th class="col-3"><button class="btn btn-info" type="button" (click)="toggleValue($event, setting.id)">Toggle</button></th>

toggleValue(event: MouseEvent, id: string) {
  event.preventDefault();
  event.stopPropagation();

  ...
}

Answer 2

you can try this

 <tr> <td class="col-3" (click)="clickFila()">1</td> <td class="col-4" (click)="clickFila()">2</td> <th class="col-3" (click)="clickFila()">3</th> <td class="col-2"(click)="clickColumna()">4</td> </tr>