How to prevent ng-click in container not be triggered by elements inside in AngularJS

Question

I have this situation:

<div ng-click="foo()">
  <a ng-click="bar()">Bar</a>
  <p>Lorem Ipsun</p>
</div>

My problem is, when I click in Bar, foo() is called too. How to call just bar() when click in Bar, and just call foo() when I am not click in bar()?

score 3 · Answer 1 · edited May 23 '17 at 12:23

3

I got my answer in this question:

AngularJS ng-click stopPropagation

Just need to change the HTML to this:

<div ng-click="foo()">
  <a ng-click="bar(); $event.stopPropagation()">Bar</a>
  <p>Lorem Ipsun</p>
</div>

edited May 23 '17 at 12:23

Community

1
1

answered May 12 '14 at 04:36

rafaels88

839
1
6
19

score 2 · Answer 2 · answered May 12 '14 at 04:35

2

ngClick provides the event object in a $event variable. You can call stopPropagation() on it to stop the event from bubbling...

<div ng-click="foo()">
  <a ng-click="bar($event)">Bar</a>
  <p>Lorem Ipsun</p>
</div>

Controller

$scope.bar = function ($event) {
    $event.stopPropagation();
};

JSFiddle

answered May 12 '14 at 04:35

Anthony Chu

37,170
10
81
71

Do you think that put could be more faster about performance than pass $event as argument? Also, if in other part I would call bar(), I don't need always to pass $event. What do you think? – rafaels88 May 12 '14 at 04:51
Perf-wise, you would never notice the difference. But now that I think about it, this is a view-specific concern and the controller method shouldn't know about it, you should use `ng-click="bar(); $event.stopPropagation()"`. +1 for your answer... :) – Anthony Chu May 12 '14 at 04:56

score 0 · Answer 3 · answered May 12 '14 at 04:43

Use event.stopPropation() or event.cancelBubble = true to prevent event bubbling Write this code inside the bar() method to prevent calling foo() (parent) method

event = event || window.event // cross-browser event
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }

JS Fiddle: http://jsfiddle.net/55sfc/1/

How to prevent ng-click in container not be triggered by elements inside in AngularJS

3 Answers3