Angular中点击td时如何阻止tr的click事件触发？

这是DOM事件冒泡机制导致的——点击子元素时，事件会向上传递到父元素，所以两个点击事件都会触发。要避免这种情况，只需要在的点击事件里阻止事件冒泡即可。

方案1：在模板中直接阻止冒泡 #

修改的点击绑定，添加$event.stopPropagation()：

<tr (click)="update(list.Item)" *ngFor="let list of List | paginate: { itemsPerPage: 10, currentPage: p };">
              
  <td style="width:5%" (click)="delete(list.Item); $event.stopPropagation()">  
    <a title="Delete"><i class="icon-trash" style="margin-right: 10px"></i></a>
  </td>
</tr>

方案2：在组件方法中阻止冒泡 #

也可以把事件对象传入delete方法，在方法内部处理：

<tr (click)="update(list.Item)" *ngFor="let list of List | paginate: { itemsPerPage: 10, currentPage: p };">
              
  <td style="width:5%" (click)="delete(list.Item, $event)">  
    <a title="Delete"><i class="icon-trash" style="margin-right: 10px"></i></a>
  </td>
</tr>

组件中的方法修改为：

delete(itemID: any, event: Event) {
  event.stopPropagation();
  // 这里写你的删除逻辑
}

两种方式都能有效阻止的点击事件向上传递到，根据你的代码习惯选择即可。

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