How to prevent parent click event when the user clicks on his child element? AngularJS

javascript angularjs z-index
KeizerBridge picture KeizerBridge · Oct 22, 2015 · Viewed 13.2k times · Source

I have a <div> with a ng-click but this <div> have a child element with also a ng-click directive. The problem is that the click event on the child element trigger also the click event of the parent element.

How can I prevent the parent click event when I click on his child?

Here is a jsfiddle to illustrate my situation.

Thank you in advance for your help.

EDIT

Here is my code:

<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick()"></div>

    <p ng-bind="elem"></p>
</div>

<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

<script>
function TestController($scope) {
    $scope.parentClick = function() {
        $scope.elem = 'Parent';
    }

    var i = 1;
    $scope.childClick = function() {
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
    }
}
</script>

Answer

Pieter Willaert picture Pieter Willaert · Oct 22, 2015

You should use the event.stopPropagation() method. see: http://jsfiddle.net/qu86oxzc/3/

<div id="child" ng-click="childClick($event)"></div>

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

Related questions

"Thinking in AngularJS" if I have a jQuery background?

Suppose I'm familiar with developing client-side applications in jQuery, but now I'd like to start using AngularJS. Can you describe the paradigm shift that is necessary? Here are a few questions that might help you frame an answer: How do …

Read More
AngularJS passing data to $http.get request

I have a function which does a http POST request. The code is specified below. This works fine. $http({ url: user.update_path, method: "POST", data: {user_id: user.id, draft: true} }); I have another function for http GET and …

Read More
Insert HTML into view from AngularJS controller

Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view? This comes from a requirement to turn an inconsistent JSON blob into a nested list of id: value pairs. Therefore …

Read More