Angular 2在单击子项时防止单击父项答案

【问题标题】：Angular 2 prevent click on parent when clicked on childAngular 2在单击子项时防止单击父项
【发布时间】：2017-05-13 20:29:05
【问题描述】：

我有一个嵌套了一层的点击事件。当我单击孩子时，会调用预期的函数，但也会调用父函数。这是代码

<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)" />

【问题讨论】：

plnkr.co/edit/CsfL5oHPcxQJ2Zt7HOn2?p=preview 这是有效的。
plnkr 中的代码有效，但对我来说同样无效！ <li> 重复并且所有复选框都具有相同的 ngModel 是问题吗？
我想通了。我在导致问题的复选框上有一个自定义 CSS。
请将您的解决方案添加到答案框中，而不是作为问题的编辑。谢谢。
谢谢。像魅力一样工作

标签： angular angular2-template

【解决方案1】：

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

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

它可以防止当前事件在捕获和冒泡阶段进一步传播。你可以阅读更多here。此外，您可能需要将stopPropagation() 添加到复选框的click 事件中，但我不是100% 确定：

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

【讨论】：

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

【解决方案2】：

只需要在点击事件的子div上添加$event.stopPropagation()代码

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

【讨论】：

它对我有用，谢谢。

【解决方案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>

这就是你所需要的。

【讨论】：