Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Click on child element triggers its own ng-click and parent's too #5237

Closed
bshepherdson opened this issue Dec 3, 2013 · 9 comments
Closed
Milestone

Comments

@bshepherdson
Copy link
Contributor

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.

@bshepherdson
Copy link
Contributor Author

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

@ghost ghost assigned tbosch Dec 9, 2013
@IgorMinar
Copy link
Contributor

@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.

@tbosch
Copy link
Contributor

tbosch commented Dec 12, 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.

@tbosch tbosch closed this as completed Dec 12, 2013
@gomteshhatgine
Copy link

gomteshhatgine commented Aug 25, 2018

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

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

@maceonrails
Copy link

@gomteshhatgine on mobile or ionic it didn't work. it make child ng-click not triggered too.

@xenogew
Copy link

xenogew commented May 22, 2019

@gomteshhatgine in my case, it still trigger as parent perform. Do you have another approach?

@gomteshhatgine
Copy link

@maceonrails Dont know about mobile I didn't tried

@xenogew it should work
Can you please share code snippet ?

@rackymuthu
Copy link

@gomteshhatgine thanks. it's worked.

@woeterman94
Copy link

Doesn't work anymore

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants