• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

259
Views
Both outer and inner divs have ng-click and when I click on the inner div, both ng-clicks execute. How to prevent that?

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>
about 3 years ago · Santiago Gelvez
1 answers
Answer question

0

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>

about 3 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error