Question

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

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上，因为我需要在父节点上的所有位置触发它，而不是在div2上触发它。如何用角度来实现这个目标？

Answer 1

您可以使用$event.target来验证点击了哪个元素。然后执行操作。在示例中，我使用了id属性

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

脚本

$scope.test = function(event) {
    if (event.target.id == 'div1') {
        alert("test!");
    }
}

DEMO

Answer 2

您可以使用ng-click =“$ event.stopPropagation（）”来实现此目的。如果您这样做，即使您单击子元素，该事件也不会传播到父元素。

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

Answer 3

您可以检查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

  }

父div上的角度单击不会触发所有子div

3 个答案: