Angular 2 prevent click on parent when clicked on child

Question

I have a click event nested one level. When i click on the child the expected function is called but the parent's function is also called. Here is the code

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

So when the checkbox changes changeTaskStatus() and the showTask() called together. I want the parent to keep quiet when checkbox changes. How do I achieve this? It was easy to handle this in Angular 1

Things I've tried that failed

Used $event.stopPropagation() in the checkbox's click event that changed nothing

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

https://plnkr.co/edit/CsfL5oHPcxQJ2Zt7HOn2?p=preview This is working . — Milad, Dec 29 '16 at 14:01
The code in plnkr works but the same doesn't work for me! The `
I figured it out. I had a custom CSS on the checkbox that was causing the problem. — Ashik Basheer, Dec 29 '16 at 14:46
Please add your solutions in an answer box, rather than as edits to the question. Thank you. — halfer, Dec 29 '16 at 19:32

Stefan Svrkota · Accepted Answer · 2018-06-22T09:02:03.110

103

You need to use stopPropagation() for checkbox event:

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

It prevents further propagation of the current event in the capturing and bubbling phases. You can read more here. Also, you probably need to add stopPropagation() to click event of checkbox, but I'm not 100% sure:

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

edited Jun 22 '18 at 09:02

answered Dec 29 '16 at 13:44

Stefan Svrkota

48,787
9
98
87

6

This one worked `` – Ashik Basheer Dec 30 '16 at 07:51
1

Thanks for the good hint @AshikBasheer! That worked for me too. I don't think that the initial answer is still correct, because in ngModelChange, $event is not an event, but just the changed value (in case of a checkbox its just a boolean!). Thus trying $event.stopPropagation() there failed in my case. – Bernd Dec 22 '22 at 10:36

score 37 · Answer 2 · answered Aug 25 '18 at 16:52

37

Just you need to add $event.stopPropagation() code on Child div on click event

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

answered Aug 25 '18 at 16:52

Gomtesh Hatgine

539
4
13

score 5 · Answer 3 · answered Jan 16 '20 at 13:18

This is known as Event Bubbling. Events are first handled by the innermost element and then propagate to the outer elements until they reach the root.

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

In this case, when you click on username or tag, it will first call inner element i.e. getUserDetails() and the root element i.e. setUserData().

So, to prevent this event bubbling, just add

event.preventDefault();

in defination of getUserDetails($event) or

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

That's all you need to you.

Angular 2 prevent click on parent when clicked on child

3 Answers3

Linked