AngularJS中如何给整个DIV绑定ng-click实现点击内部元素触发控制器方法

AngularJS的ng-click指令默认遵循DOM事件冒泡规则，你不需要做额外的特殊配置，直接给父DIV绑定ng-click即可实现点击任意子元素触发父级绑定的函数，前提是子元素没有主动阻止点击事件冒泡。

代码示例 #

控制器代码 #

angular.module('demoApp', [])
.controller('DemoCtrl', ['$scope', function($scope) {
  // 父DIV绑定的点击处理函数
  $scope.handleParentClick = function($event) {
    // 这里编写你的业务逻辑
    console.log('点击事件触发，原始触发元素：', $event.target);
    console.log('事件绑定元素（父DIV）：', $event.currentTarget);
  };
}]);

模板代码 #

<div ng-app="demoApp" ng-controller="DemoCtrl">
  <!-- 给父DIV绑定ng-click -->
  <div ng-click="handleParentClick($event)" style="padding: 30px; border: 1px solid #eee;">
    父DIV内容
    <p>一级子元素p标签</p>
    <div>
      <span>二级嵌套子元素span</span>
      <button>子元素按钮</button>
    </div>
    <input type="text" placeholder="子元素输入框">
  </div>
</div>

注意事项 #

• 若子元素自身也绑定了ng-click事件，不要在子元素的事件处理函数中调用$event.stopPropagation()，否则会阻止事件向上冒泡，导致父DIV的点击事件无法触发
• 传入$event参数可以获取事件上下文，通过$event.target可以拿到实际被点击的子元素，方便做差异化逻辑处理
• 如果部分第三方组件内部默认阻止了点击事件冒泡，可以在组件外层套一个普通DOM元素，额外绑定ng-click="$event.stopPropagation(); handleParentClick($event)"手动触发父级方法

内容的提问来源于stack exchange，提问作者user17045467