当用户点击他的子元素时如何防止父点击事件？ AngularJS答案

【问题标题】：How to prevent parent click event when the user clicks on his child element? AngularJS当用户点击他的子元素时如何防止父点击事件？ AngularJS
【发布时间】：2015-10-22 12:33:01
【问题描述】：

我有一个<div> 和一个ng-click，但是这个<div> 有一个子元素 还有一个ng-click 指令。问题在于子元素上的点击事件触发也触发了父元素的点击事件。

当我点击他的孩子时，如何防止父点击事件？

Here is a jsfiddle 说明我的情况。

提前感谢您的帮助。

编辑

这是我的代码：

<body ng-app ng-controller="TestController"> <div id="parent" ng-click="parentClick()"> <div id="child" ng-click="childClick()"></div> <p ng-bind="elem"></p> </div> <div><p style="text-align:center" ng-bind="childElem"></p></div> </body> <script> function TestController($scope) { $scope.parentClick = function() { $scope.elem = 'Parent'; } var i = 1; $scope.childClick = function() { $scope.elem = 'Child'; $scope.childElem = 'Child event triggered x' + i; i++; } } </script>

【问题讨论】：

要么为子处理程序关闭事件冒泡，要么使用 event.target / this / yourFrameworksImplementationOfEventTarget 检查处理程序中单击的内容

标签： javascript angularjs z-index

【解决方案1】：

您应该使用 event.stopPropagation() 方法。见：http://jsfiddle.net/qu86oxzc/3/

<div id="child" ng-click="childClick($event)"></div>

$scope.childClick = function($event) {
    $event.stopPropagation();
    ...
}

【讨论】：

好吧，我现在觉得自己很蠢，但谢谢你，这正是我想要的。我没有考虑它，因为我通常从不通过元素。但是有没有另一种方法可以在没有 stopPropagation 的情况下执行此操作？
你“可以”做类似stackoverflow.com/a/33281294/1782659 的事情，但我认为这真的很难看。阻止事件向上冒泡是正确的做法（imo），您还可以查看事件的目标（如果 $event.target === childElement）

【解决方案2】：

使用event.stopPropagation 阻止event 从子事件处理程序冒泡DOM 树。

Updated Demo

function TestController($scope) {
  $scope.parentClick = function() {

    $scope.elem = 'Parent';
  }

  var i = 1;
  $scope.childClick = function(e) {
    $scope.elem = 'Child';
    $scope.childElem = 'Child event triggered x' + i;
    i++;

    e.stopPropagation(); // Stop event from bubbling up
  }
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#parent {
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 1;
  margin: 10px auto 0 auto;
  background-color: #00acee;
  border-radius: 2px;
  cursor: pointer;
}
#parent:hover {
  opacity: 0.5;
}
#child {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background-color: #FFF;
  border-radius: 2px;
  cursor: pointer;
}
#child:hover {
  opacity: 0.5;
}
#parent p {
  width: 100%;
  position: absolute;
  bottom: 0px;
  text-align: center;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<body ng-app ng-controller="TestController">
  <div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick($event)"></div>
    <!--                                 ^^^^^^^     -->
    <p ng-bind="elem"></p>
  </div>
  <div>
    <p style="text-align:center" ng-bind="childElem"></p>
  </div>
</body>

【讨论】：

【解决方案3】：

您也可以像使用它一样使用它。

<div id="child" ng-click="childClick();$event.stopPropagation();"></div>

【讨论】：

【解决方案4】：

即使 Pieter Willaert 的答案更漂亮，我也用一个简单的布尔检查更新了你的小提琴：

http://jsfiddle.net/qu86oxzc/6/

function TestController($scope) {
    $scope.boolean = false;
    $scope.parentClick = function () {
        if (!$scope.boolean) $scope.elem = 'Parent';
        $scope.toggleBoolean();
    }

    var i = 1;
    $scope.childClick = function () {
        $scope.boolean = true;
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
    }

    $scope.toggleBoolean = function () {
        $scope.boolean = !$scope.boolean;
    }
}

【讨论】：

【解决方案5】：

你也可以试试$event.stopPropagation();。写在子函数之后。它的工作原理类似于 preventdefault。

<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick();$event.stopPropagation();"></div>

    <p ng-bind="elem"></p>
</div>

<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

【讨论】：