两个与angularjs嵌套的点击事件

我有这样的HTML结构：

<div ng-click="test()"> <div id="myId" ng-click="test2()"></div> <div></div> ... </div> 

目前，当我点击与id myId的div ，然后这两个函数被触发，但我希望只是test2函数被触发。 我怎样才能做到这一点？

Answer 1

所有你需要做的就是停止事件传播/冒泡。

此代码将帮助您：

 <div ng-click="test()">ZZZZZ <div id="myId" ng-click="test2();$event.stopPropagation()">XXXXX</div> <div>YYYYYY</div> ... </div> 

如果你的test和test2函数如下所示，当你点击myId DIV时，你的控制台中只有test2 。 如果没有$event.stopPropagation()你将在控制台输出窗口中得到test2然后进行test 。

 $scope.test = function() { console.info('test'); } $scope.test2 = function() { console.info('test2'); } 

Answer 2

和汤姆的回答一样，但是有点不同。

  <div ng-click="test()"> <div id="myId" ng-click="test2($event)">child</div> </div> $scope.test2 =function($event){ $event.stopPropagation(); console.log("from test2") } $scope.test =function(){ console.log("from test") } 

Answer 3

这是一个基于另一个支持ng-href链接的问题的指令。

指示

 'use strict'; var myApp = angular.module('myApp', [ 'ngAnimate' ]); /** * @ngdoc directive * @name myMobileApp.directive:stopEvent * @description Allow normal ng-href links in a list where each list element itselve has an ng-click attached. */ angular.module('myApp') .directive('stopEvent', function($location, $rootScope) { return { restrict: 'A', link: function(scope, element) { element.bind('click', function(event) { // other ng-click handlers shouldn't be triggered event.stopPropagation(event); if(element && element[0] && element[0].href && element[0].pathname) { // don't normaly open links as it would create a reload. event.preventDefault(event); $rootScope.$apply(function() { $location.path( element[0].pathname ); }); } }); } }; }) .controller('TestCtrl', ['$rootScope', '$scope', 'Profile', '$location', '$http', '$log', function($rootScope, $scope, Profile, $location, $http, $log) { $scope.profiles = [{'a':1,'b':2},{'a':3,'b':3}]; $scope.goToURL = function(path, $event) { $event.stopPropagation($event); $location.path(path); }; } ]); 

  <div ng-repeat="x in profiles" ng-click="goToURL('/profiles/' + xa, $event)"> <a stop-event ng-href="/profiles/{{xb}}">{{x}}</a> </div>