使父 div 可點擊，但子圖標除外

Question

 <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()"></i> </div>

我希望整個 div 都是可點擊的，但不是 id=delete 的圖標。 我想有一個不同的點擊事件，我不使用 jquery，我使用 TS

Answer 1

您可以使用event.stopPropagation()阻止事件在 DOM 樹中向上傳播：

(click)="deleteTemplate($event)"></i>

deleteTemplate(e: Event) {
    e.stopPropagation(); // <----event won't travel up 
}