angular ngClick阻止冒泡使用默认行为的方法


Posted in Javascript onNovember 03, 2016

本文实例讲述了angular ngClick阻止冒泡使用默认行为的方法。分享给大家供大家参考,具体如下:

这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的。但是这个问题不止一次的被人问起,所以今天在记录在这里。

在Angular中已经对一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick...中加入了一个变量叫做$event.

如ngClick在官方文档是这么描述的:

Expression to evaluate upon click. (Event object is available as $event)

在查看Angular代码ngEventDirs.js:

var ngEventDirectives = {};
forEach(
   'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
   function(name) {
    var directiveName = directiveNormalize('ng-' + name);
    ngEventDirectives[directiveName] = ['$parse', function($parse) {
     return {
      compile: function($element, attr) {
       var fn = $parse(attr[directiveName]);
       return function(scope, element, attr) {
        element.on(lowercase(name), function(event) {
         scope.$apply(function() {
          fn(scope, {$event:event});
         });
        });
       };
      }
     };
    }];
   }
);

在上边代码我们可以得到两个信息:

①. Angular支持的event: click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste

②. Angular在执行事件函数时候传入了一个名叫$event的常量,该常量即代表当前event对象,如果你在Angular之前引入了jQuery那么这就是jQuery的event.

所以我们可以利用event的stopPropagation来阻止事件的冒泡:如下代码:jsbin

html 代码:

<!DOCTYPE html>
<html id="ng-app" ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="demo as d">
<div ng-click="d.click('parent',$event)">
given some text for click
<hr>
<input type="checkbox" ng-model="d.stopPropagation" />Stop Propagation ?
<hr>
<button type="button" ng-click="d.click('button',$event)">button</button>
</div>
</body>
</html>

js 代码:

angular.module("app",[])
.controller("demo",[function(){
 var vm = this;
 vm.click = function(name,$event){
  console.log(name +" -----called");
  if(vm.stopPropagation){
   $event.stopPropagation();
  }
 };
 return vm;
}]);

可以在jsbin查看效果。

首先打开你的控制台,然在没选中Stop Propagation的情况下点击button你将会看见两条log记录,相反选中后则只会出现button的log信息。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
vue.js指令v-for使用及索引获取
Nov 03 #Javascript
vue.js初学入门教程(1)
Nov 03 #Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 #Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 #Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 #Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 #Javascript
微信小程序  audio音频播放详解及实例
Nov 02 #Javascript
You might like
第五章 php数组操作
2011/12/30 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
JavaScript触发器详解
2007/03/10 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
用C++封装MySQL的API的教程
2015/05/06 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python调用服务接口的实例
2019/01/03 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
医学生毕业自我鉴定
2014/03/26 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python