angular ngClick阻止冒泡使用默认行为的方法  更新时间:2016年11月03日 09:27:08   作者:破狼   这篇文章主要介绍了angular ngClick阻止冒泡使用默认行为的方法,较为详细的分析了AngularJS中ngClick事件执行原理与阻止冒泡的实现技巧,需要的朋友可以参考下 本文实例讲述了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 代码: JS Bin given some text for click Stop Propagation ? button 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程序设计有所帮助。 您可能感兴趣的文章: AngularJS基础 ng-dblclick 指令用法 AngularJS基础 ng-click 指令示例代码 ANGULARJS中用NG-BIND指令实现单向绑定的例子 angularjs自定义ng-model标签的属性 AngularJS学习笔记之ng-options指令 angularjs表格ng-table使用备忘录 angularjs在ng-repeat中使用ng-model遇到的问题 AngularJS基础 ng-include 指令示例讲解 AngularJS ng-change 指令的详解及简单实例 Angular.js回顾ng-app和ng-model使用技巧 Angular ng-repeat 对象和数组遍历实例 AngularJS基础 ng-init 指令简单示例 angular ngClick 冒泡 相关文章 AngularJS 入门教程之事件处理器详解 本文主要介绍AngularJS 事件处理器,这里整理了相关资料和示例代码,有需要的小伙伴可以参考下 2016-08-08 Angular使用动态加载组件方法实现Dialog的示例 这篇文章主要介绍了Angular使用动态加载组件方法实现Dialog的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 关于angular引入ng-zorro的问题浅析 这篇文章主要给大家介绍了关于angular引入ng-zorro的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2020-09-09 AngularJS实现数据列表的增加、删除和上移下移等功能实例 这篇文章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能,对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友可以看看。 2016-09-09 使用AngularJS来实现HTML页面嵌套的方法 这篇文章主要介绍了使用AngularJS来实现HTML页面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以参考下 2015-06-06 AngularJS发送异步Get/Post请求方法 今天小编就为大家分享一篇AngularJS发送异步Get/Post请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 深入学习JavaScript的AngularJS框架中指令的使用方法 这篇文章主要介绍了深入学习JavaScript的AngularJS框架中指令的使用方法,指令的使用是Angular入门学习中的基础知识,需要的朋友可以参考下 2016-03-03 AngularJS表单详解及示例代码 本文主要介绍AngularJS表单的知识,这里整理了表单的基础知识和简单的示例代码,有需要的小伙伴可以参考下 2016-08-08 angularjs表格分页功能详解 本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码,非常的简单实用,有需要的小伙伴可以参考下。 2016-01-01 Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍 这篇文章主要介绍了Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍的相关资料,需要的朋友可以参考下 2016-12-12 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • AngularJS基础 ng-dblclick 指令用法
  • AngularJS基础 ng-click 指令示例代码
  • ANGULARJS中用NG-BIND指令实现单向绑定的例子
  • angularjs自定义ng-model标签的属性
  • AngularJS学习笔记之ng-options指令
  • angularjs表格ng-table使用备忘录
  • angularjs在ng-repeat中使用ng-model遇到的问题
  • AngularJS基础 ng-include 指令示例讲解
  • AngularJS ng-change 指令的详解及简单实例
  • Angular.js回顾ng-app和ng-model使用技巧
  • Angular ng-repeat 对象和数组遍历实例
  • AngularJS基础 ng-init 指令简单示例
张贴在3