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

I want the entire div to be clickable but not the icon with id= delete. I want to have a different click event on that I dont use jquery, i work with TS

Answer 1

You can stop the event to propagate up in the DOM tree with event.stopPropagation() :

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

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