Question

具有一个带有行的表，我可以单击一行以通过单独的页面访问一行的详细信息。这是通过[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>

我希望“切换”按钮的点击事件优先于前面提到的行点击事件。我怎样才能做到这一点？

右键单击“上下文菜单”可以正常工作。

Answer 1

您需要阻止事件冒起dom树。

<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

您可以尝试

<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>

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

2 个答案: