如何防止容器中的ng-click不会被AngularJS中的元素触发

How to prevent ng-click in container not be triggered by elements inside in AngularJS

本文关键字：AngularJS 元素 ng-click 何防止      更新时间：2023-09-26

我有这样的情况:

<div ng-click="foo()">
  <a ng-click="bar()">Bar</a>
  <p>Lorem Ipsun</p>
</div>

我的问题是，当我点击在酒吧，foo()也被调用。如何调用只是bar()当点击在酒吧，只是调用foo()当我不点击在酒吧()?

我得到了这个问题的答案:

AngularJS ng-click stopPropagation

只需将HTML更改为:

<div ng-click="foo()">
  <a ng-click="bar(); $event.stopPropagation()">Bar</a>
  <p>Lorem Ipsun</p>
</div>

ngClick在$event变量中提供事件对象。您可以调用stopPropagation()来阻止事件冒泡…

<div ng-click="foo()">
  <a ng-click="bar($event)">Bar</a>
  <p>Lorem Ipsun</p>
</div>
控制器

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

JSFiddle

使用event. stopproation()或event. stopproation()。cancelBubble = true防止事件冒泡在bar()方法中编写以下代码以防止调用foo()(父)方法

event = event || window.event // cross-browser event
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }

JS小提琴:http://jsfiddle.net/55sfc/1/

相关文章：