I have an element inside a container with ng-click, that should not execute this click action. It has the structure similar to this:

<div class="container" ng-click="takeSomeAction()>
    <p>Some content</p>
    <a class="btn" ng-href="#{{whatever}}">button content</a>
</div>

How to prevent executing takeSomeAction() when you click the button?

I have an element inside a container with ng-click, that should not execute this click action. It has the structure similar to this:

<div class="container" ng-click="takeSomeAction()>
    <p>Some content</p>
    <a class="btn" ng-href="#{{whatever}}">button content</a>
</div>

How to prevent executing takeSomeAction() when you click the button?

• javascript
• angularjs
• angularjs-ng-click

1 Answer 1

You need to stop the event propagation, which can be done very easily with another ng-click.

<div class="container" ng-click="takeSomeAction()>
    <p>Some content</p>
    <a class="btn" ng-href="#{{whatever}}" ng-click="$event.stopPropagation()">button content</a>
</div>

It will prevent the routine execution while following the href.