angular ngClick阻止冒泡使用默认行为的方法
本文实例讲述了angularngClick阻止冒泡使用默认行为的方法。分享给大家供大家参考，具体如下：
这其实是一个很简单的问题，如果你认真查看过Angular官方的API文档，本来不想记录的。但是这个问题不止一次的被人问起，所以今天在记录在这里。
在Angular中已经对一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick...中加入了一个变量叫做$event.
如ngClick在官方文档是这么描述的：
Expressiontoevaluateuponclick.(Eventobjectisavailableas$event)
在查看Angular代码ngEventDirs.js:
varngEventDirectives={};
forEach(
'clickdblclickmousedownmouseupmouseovermouseoutmousemovemouseentermouseleavekeydownkeyupkeypresssubmitfocusblurcopycutpaste'.split(''),
function(name){
vardirectiveName=directiveNormalize('ng-'+name);
ngEventDirectives[directiveName]=['$parse',function($parse){
return{
compile:function($element,attr){
varfn=$parse(attr[directiveName]);
returnfunction(scope,element,attr){
element.on(lowercase(name),function(event){
scope.$apply(function(){
fn(scope,{$event:event});
});
});
};
}
};
}];
}
);
在上边代码我们可以得到两个信息：
①.Angular支持的event：clickdblclickmousedownmouseupmouseovermouseoutmousemovemouseentermouseleavekeydownkeyupkeypresssubmitfocusblurcopycutpaste
②.Angular在执行事件函数时候传入了一个名叫$event的常量，该常量即代表当前event对象，如果你在Angular之前引入了jQuery那么这就是jQuery的event.
所以我们可以利用event的stopPropagation来阻止事件的冒泡：如下代码：jsbin
html代码：
<!DOCTYPEhtml>
<htmlid="ng-app"ng-app="app">
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<metacharset="utf-8">
<title>JSBin</title>
</head>
<bodyng-controller="demoasd">
<divng-click="d.click('parent',$event)">
givensometextforclick
<hr>
<inputtype="checkbox"ng-model="d.stopPropagation"/>StopPropagation?
<hr>
<buttontype="button"ng-click="d.click('button',$event)">button</button>
</div>
</body>
</html>
js代码：
angular.module("app",[])
.controller("demo",[function(){
varvm=this;
vm.click=function(name,$event){
console.log(name+"-----called");
if(vm.stopPropagation){
$event.stopPropagation();
}
};
returnvm;
}]);
可以在jsbin查看效果。
首先打开你的控制台，然在没选中StopPropagation的情况下点击button你将会看见两条log记录，相反选中后则只会出现button的log信息。
希望本文所述对大家AngularJS程序设计有所帮助。
热门推荐
10 香港老妈结婚祝福语简短
11 毕业立体贺卡祝福语简短
12 简短新年年会祝福语
13 评论小品祝福语大全简短
14 恭喜师兄结婚祝福语简短
15 员工集体辞职祝福语简短
16 高中新生祝福语 简短
17 装修祝福语男生搞笑简短
18 生日开业蛋糕祝福语简短