Angular+TS实现父div可点击，排除删除图标并绑定独立点击事件

要实现点击delete图标时只触发自身的deleteTemplate()，不触发外层div的expanderClicked()和itemSelected()，核心是阻止事件冒泡，直接在delete图标的点击事件里调用$event.stopPropagation()即可，不需要额外依赖。

修改后的代码如下：

<div
  [ngClass]="{ 'template-row': !isExpandable, 'folder-row': isExpandable }"
  class="label-with-icons clickable"
  (click)="expanderClicked()"
  (click)="itemSelected()"
>
  <i *ngIf="isExpandable" [ngClass]="getArrowIconClass()"></i><i [ngClass]="getIconClass()"></i>
  <span *ngIf="id" class="name ">{{ name }}</span>
  <span *ngIf="!id" class="name">{{ name }}</span>

  <i *ngIf="!isExpandable" class="io-icon-trash clickable" id="delete" (click)="deleteTemplate(); $event.stopPropagation()"></i>
</div>

原理说明 #

DOM事件默认会向上冒泡，子元素的点击事件会传递到父级元素。通过在delete图标的点击事件中执行$event.stopPropagation()，可以终止事件的冒泡过程，这样父div的点击事件就不会被触发，只会执行deleteTemplate()。

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