Question

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

view

因此，当复选框更改<li class="task-item" *ngFor="let task of tasks" (click)="showTask(task.name)"> <input type="checkbox" [ngModel]="task.taskStatus" (ngModelChange)="changeTaskStatus($event)" /> </li>并且changeTaskStatus()一起调用时。我希望父母在复选框更改时保持安静。我该如何实现这一目标？在Angular 1中很容易处理这个问题

我尝试过的事情失败了

在复选框的点击事件中使用了showTask()

$event.stopPropagation()

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

Answer 2

只需在点击事件

的 Child div 上添加 $ event.stopPropagation（）代码

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

Answer 3

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

var res=DownloadAttachment(filename);
if (res == null)
   return Content("filename not present");
return  File(res, Utility.GetContentType(filename), filename);

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

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

event.preventDefault（）;

根据getUserDetails（$ event）或

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

这就是您所需要的。

Answer 4

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

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

4 个答案: