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(DHTML)中的一些技巧
Jan 09 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php数组去重实例及分析
2013/11/26 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
实例讲解PHP表单
2020/06/10 PHP
jQuery使用手册之一
2007/03/24 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
学年自我鉴定范文
2013/10/01 职场文书
小学后勤管理制度
2014/01/14 职场文书
中学生家长评语大全
2014/04/16 职场文书
给校长的建议书200字
2014/05/16 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
党建工作整改措施
2014/10/28 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
Go语言带缓冲的通道实现
2021/04/26 Golang
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技