Angular.js: Click on child element triggers its own ng-click and parent's too

Created on 3 Dec 2013 · 9Comments · Source: angular/angular.js

If I have a <div> with an ng-click and then a <button> inside with a separate ng-click, clicking the button will fire both ng-click handlers.

I found Igor's ancient PR for this (#31 !) but it seems that the stopPropagation() he added has been lost somewhere in between.

I tried to bisect, but found that it isn't working in 1.2.3, master, 1.1.5, 1.1.3, 1.0.6, or 1.0.3. I tried to bisect between master and Igor's commit in the above PR, but they changes got so old (0.10.x) that my test app won't work at all.

Simple test case to reproduce this on Plunkr.

Source

shepheb

Most helpful comment

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

gomteshhatgine on 25 Aug 2018

👍30 🎉14 ❤10 👎3

All 9 comments

It seems that the stopPropagation() call was removed by 1752c8c44a7058e974ef208e583683eac8817789.

shepheb on 3 Dec 2013

@tbosch please make decision whether this works as expected or if there is something we can do to deal with this situation.

we can't stop the propagation by default because there would be no way to unstop it.

IgorMinar on 9 Dec 2013

There are valid use cases for not stopping the propagation.
Stopping the propagation would make those use cases not more possible, as we can't unstop the propagation.

E.g. usecase:
List of items with a "publish" button. When clicking on one of those items the item should be highlighted as the selected item. This should also be the case if the "publish" button of a non selected item is pressed.

Right now this is possible, see this punk: http://plnkr.co/edit/jVIovi0L9Hgo1Bl9t72O?p=preview

Closing this as it works as expected.