javascript - 对父 div 的 Angular 单击不会触发所有子 div

Question

我在父 DIV 上有 ng-click 事件，它调用函数。我希望仅在单击父 div 时触发此事件，而不是在单击子 div 时触发此事件。因此，如果在父级内单击的区域覆盖子级 div，则不应触发事件。现在，点击 div2 触发事件。

我的例子是here on code pen

HTML 结构:

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test();">
  <div id="div2" class="div2">
  </div>
</div>

这个div(子div)里面有div1(父div)和div2。我已经将 ng-click 放在父 div 上，因为我需要在父 div 的任何地方触发它，只有 div2 不需要。如何用 Angular 实现这一点？

Answer 1

您可以检查 target 元素和 currentTarget 是否相同

HTML

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test($event);"> // Passing event object
  // Rest of code
</div>

JS

$scope.test = function(e) {
  if (e.target == e.currentTarget) {  // checking if target and currentTarget is same
    alert("test!");
  } else {
    //Rest of code

  }