外部和内部 div 都有 ng-click，当我单击内部 div 时，两个 ng-click 都会执行。如何防止这种情况？

Question

我有 2 个 div，一个外部的和一个内部的，它们都附加了 ng-click。当我尝试单击内部 div 时，这两个函数都会执行（我假设是因为我实际上也在单击外部 div，因为它包含内部函数）。单击内部 div 时如何防止外部 div 的功能执行？

<div ng-click="vm.showMoreHandler()">
    <div ng-click="vm.actionHandler($event, action)"></div>
</div>

Answer 1

你可以使用event.stopPropagation()来防止它冒泡

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>

外部和内部 div 都有 ng-click，当我单击内部 div 时，两个 ng-click 都会执行。如何防止这种情况？

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

javascript

angularjs