防止ng-click在Angular中从子元素传播到父元素答案

【问题标题】：Prevent ng-click propagation from child to parent element in Angular防止ng-click在Angular中从子元素传播到父元素
【发布时间】：2015-12-17 13:49:47
【问题描述】：

水果的名称是嵌套在<div ng-repeat=".."></div> 中的a 元素。单击此橙色父级div 时，会显示一些隐藏的文本。单击水果名称时，它应该变为粗体。

问题：当点击水果名称时，它会变成粗体并且隐藏的文字会显示出来。我们如何让水果名称加粗而不显示隐藏文本？

我认为这涉及防止点击事件从a 传播到div，我们该怎么做？

Jsfiddle： http://jsfiddle.net/tf4b63km/

点击水果名称之前

点击水果名称后

【问题讨论】：

stackoverflow.com/a/15193650/1398867

标签： javascript jquery angularjs

【解决方案1】：

您可以通过调用stopPropagation 来阻止事件冒泡。在您的情况下，您需要做两件事：

1) 将$event 传递给makeBold 函数：ng-click="makeBold($event, f)"

2) 致电stopPropagation

function makeBold($event, f) {
   $event.stopPropagation();
   // ...
}

【讨论】：

【解决方案2】：

在makeBold 函数中使用e.stopPropagation(); 来阻止事件在DOM 树中冒泡。这将使父事件处理程序不会在子点击时运行。

将$event 对象传递给点击处理程序
在处理程序中，使用stopPropagation()

Updated Fiddle

var myApp = angular.module('myApp', []);

FruitCtrl = function($scope) {
  $scope.fruits = [{
    title: 'apple',
    color: 'red'
  }, {
    title: 'orange',
    color: 'orange'
  }, {
    title: 'banana',
    color: 'yellow'
  }];

  $scope.makeBold = function(e, f) {
    console.log('makeBold')
    f.isBold = 'bold';

    // Stop event propagation here
    e.stopPropagation();
  }
}

.fruit {
  background: #FF735C;
  width: 100px;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}
.fruit a {
  color: #fff;
}
.fruit:hover {
  background: #3D3240;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="FruitCtrl">
    <div ng-repeat='f in fruits' class='fruit' ng-click='f.show = !f.show'>
      <a href="#" ng-click='makeBold($event, f)' ng-style='{"font-weight": f.isBold}'>{{ f.title }}</a>
      <!--                           ^^^^^^ Pass event object --->
      <div ng-show='f.show'>
        {{ f.color }}
      </div>
    </div>
  </div>
</div>

【讨论】：