另一个点击事件中的角度点击事件答案

【问题标题】：Angular click event inside another click event另一个点击事件中的角度点击事件
【发布时间】：2021-04-16 20:46:03
【问题描述】：

我的页面中有以下设置

当我单击一个部门的主框时，它会被选中，然后部门和团队会在右侧的选项卡中更新。不过我也想点击编辑图标来编辑部门名称。

因为编辑点击事件在选择分区点击事件中，所以当我点击编辑时，这两个事件都会被触发。

解决这个问题的方法是什么？如何单击编辑按钮并仅触发该事件而不触发选择除法事件？我是否必须将它移到 html 之外然后相对定位它？有没有更好的办法？

<div class="divisionList">
   <div *ngFor="let division of filteredDivisions" (click)="selectDivision(division)"
       <form [formGroup]="formDivision" fxLayout="row" class="divisionForm">
           <h4 *ngIf="!isDivisionNameBeingEdited(division)">{{division.name}}</h4>
              <input matInput #editTitle (change)="submit()"
                  *ngIf="isDivisionNameBeingEdited(division)" class="mrmd titleInput"
                    id="title2" formControlName="division" />
            <div fxFlex></div>
            <mat-icon (click)="editDivisionName(division)">edit</mat-icon>
        </form>
    </div>
</div>

【问题讨论】：

标签： javascript html angular

【解决方案1】：

这是在 JavaScript 中处理点击事件的方式。它们'bubble' 或通过父元素向上传播。您需要处理该事件并明确告诉它不要向上传播元素链。

<div class="divisionList">
   <div *ngFor="let division of filteredDivisions" (click)="selectDivision(division)"
       <form [formGroup]="formDivision" fxLayout="row" class="divisionForm">
           <h4 *ngIf="!isDivisionNameBeingEdited(division)">{{division.name}}</h4>
              <input matInput #editTitle (change)="submit()"
                  *ngIf="isDivisionNameBeingEdited(division)" class="mrmd titleInput"
                    id="title2" formControlName="division" />
            <div fxFlex></div>
            <mat-icon (click)="editDivisionName($event, division)">edit</mat-icon>
        </form>
    </div>
</div>

在.ts 文件中

editDivisionName($event: MouseEvent, division) {
    $event.stopPropogation();
}

StackBlitz demonstration

【讨论】：