Alan Alan - 6 months ago 28
AngularJS Question

Is there a way I can prevent the clicking of a button in a row (div with ng-click) from firing the div's click event?

I have a grid of rows that are part of an ng-repeat. At the same level as the ng-repeat I have a ng-click which I want to be fired when a user clicks on the row.

On each row I have a standard button with an ng-click event.

When a user clicks on the button the button ng-click event fires and also the ng-click event of the DIV that contains it.

Is it possible for the latter to be stopped. In other words for the clicking on the button to not fire the 2nd ng-click on the containing row?


Yes, it's possible. You can stop children's event propagation before it hits his parent element like so:


For example:

<row ng-click="onParentClicked($event)">
    <button ng-click="onChildrenClicked($event)">Hit me</button>

And then the controller:

function myController($scope){

    $scope.onParentClicked = function ($event) {
        // some click logic here

    $scope.onChildrenClicked= function ($event) {
        // stop propagation

        // some click logic here