I have 2 divs, an outer and inner one that have ng-click attached to both of them. When I try to click the inner div, both functions execute ( I assume because I’m essentially also clicking the outer div because it contains the inner one ). How can I prevent the outer div’s function from executing when clicking on the inner div?
<div ng-click="vm.showMoreHandler()">
<div ng-click="vm.actionHandler($event, action)"></div>
</div>
>Solution :
You can use event.stopPropagation() to keep it from bubbling up
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.showMoreHandler = function(e) {
console.log('showMoreHandler');
}
$scope.actionHandler = function(e) {
e.stopPropagation();
console.log('actionHandler');
}
}]);div {
padding: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-click="showMoreHandler($event)">showMoreHandler
<div ng-click="actionHandler($event)">actionHandler</div>
</div>
</div>