Angular 2在单击子项时阻止单击父项

Question

我有一个嵌套一级的点击事件.当我点击孩子时,会调用预期的函数,但也会调用父函数.这是代码

<li class="task-item" *ngFor="let task of tasks" (click)="showTask(task.name)">
    <input type="checkbox" [ngModel]="task.taskStatus" (ngModelChange)="changeTaskStatus($event)" />
</li>

所以当复选框改变changeTaskStatus()并且showTask()一起调用时.我希望父母在复选框更改时保持安静.我该如何实现这一目标？在Angular 1中很容易处理这个问题

我试过的事情都失败了

用于$event.stopPropagation()复选框的单击事件,该事件未发生任何变化

<input type="checkbox" [ngModel]="task.taskStatus" (click)="$event.stopPropagation()" (ngModelChange)="changeTaskStatus($event)" />

Answer 1

您需要使用stopPropagation()复选框事件:

<input type="checkbox" [ngModel]="task.taskStatus" (ngModelChange)="changeTaskStatus($event);$event.stopPropagation()" />

它可以防止当前事件在捕获和冒泡阶段进一步传播.你可以在这里阅读更多.此外,你可能需要添加stopPropagation()到click复选框的事件,但我肯定不是100%:

<input type="checkbox" [ngModel]="task.taskStatus" (click)="$event.stopPropagation()" (ngModelChange)="changeTaskStatus($event)" />

Answer 2

只需要在Click事件上的Child div上添加 $ event.stopPropagation()代码

 <input  (click)="onChildClickFunction();$event.stopPropagation()"/>

Answer 3

这称为事件冒泡。 事件首先由最里面的元素处理，然后传播到外部元素，直到到达根。

<div *ngFor="let item of userList">
  <div (click)="setUserData(item)">
    <a (click)="getUserDetails(item.user.id)">Name - {{item.user.name}}</a>
  </div>
</div>

在这种情况下，当您单击用户名或标签时，它将首先调用内部元素即 getUserDetails() 和根元素即 setUserData()。

因此，为了防止此事件冒泡，只需添加

event.preventDefault();

在 getUserDetails($event) 的定义中或

<a (click)="getUserDetails(item.user.id); $event.stopPropagation();">Name - {{item.user.name}}</a>

这就是你所需要的。