这其实是一个很简单的问题，如果你认真查看过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});

                  });

                });

              };

            }

          };

        }];

      }

    );
   在上边代码我们可以得到两个信息：
  1. Angular支持的event： click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste
  2. 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](http://jsbin.com/delow/3/watch?html,js,output)查看效果。

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

希望大家已经明白了，不要再问这类问题了。

Angular ngClick 阻止冒泡和默认行为的更多相关文章

  1. js阻止冒泡和默认事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. angular 点击事件阻止冒泡及默认行为

    经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...

  3. jQuery 阻止冒泡和默认事件

    jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...

  4. js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

  5. 如何阻止冒泡&&浏览器默认行为

    摘要 很多同学对阻止事件冒泡和阻止事件默认行为容易混淆,项目中因为一些原因也需要阻止浏览器的一些默认行为,这里就简单总结一下. 阻止事件冒泡 什么是事件冒泡这里就不再赘述了,网上的文章一大把,这里就简 ...

  6. angular 禁止事件冒泡 和 默认行为

    事件冒泡和事件捕捉一直以来都是被讨论的话题,也许大家平时在工作中没有遇到过需要解决事件冒泡的情况举个例子: <body ng-click="fun1()"> <d ...

  7. 基本event封装：阻止冒泡、默认事件等

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...

  8. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

  9. 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

随机推荐

  1. pll及其modesim仿真

    100mhz输入时钟,pll层40mhz和200zhm 进入quartus,建立工程,新建图形文件,导入pll模块,设定pll相关参数.   完成pll模块的建立,并生成pll.v文件 建立modes ...

  2. Fuzzy Probability Theory---(2)Computing Fuzzy Probabilities

    Let $X=\{x_1,x_2,...,x_n\}$ be a finite set and let $P$ be a probability function defined on all sub ...

  3. shell <<EOF

    1.考虑下面的需求,在主shell执行命令,进入其他的命令,后面的输入,想作为命令的输入,而不是主shell的输入,怎么办? 2.使用<<EOF,告诉主shell,后续的输入,是其他命令或 ...

  4. cassandra指定数据库路径

    参考 https://docs.datastax.com/en/cassandra/2.1/cassandra/configuration/configCassandra_yaml_r.html 我们 ...

  5. c++11 实现单例模式

    C++11出来后,里面新增加了好多好用的功能 下面的单例就是使用了C++11中的标准库中的mutex和unique_prt 进行内存管理的. 此单例模式不用担心内存的释放问题 #pragma once ...

  6. nginx新增绑定域名

    例如我要使binzz.com也绑定到原有的www.binzz.com上,在server上添加下面代码: server {        listen       80;        server_n ...

  7. 虚拟机上安装ArchLinux笔记

    安装前的自白: 想使用ArchLinux,就直接在虚拟机上先装一个玩起来先.虚拟机使用的是Vmware,下载免费的个人版本就可以了. Arch Linux的版本为2016.4.1 内核为4.4.5 在 ...

  8. 【转】简易smtp调用类

    用PHP发邮件的一个类,无需验证SMTP主机,类代码你可以不用管,只要按照后面的使用方法操作就行,这个类要先保存成一个php文件,文件名就叫smtp.php吧,下面是该文件代码: <?php c ...

  9. 1500. Prime Gap 11 月 11日

    /*本篇为转载,在此申明,具体就是先设定从2以后所有的数都为质数,定为质数的数的倍数则不是质数,慢慢排除后面的数*/ #include<iostream>#include<cstri ...

  10. angular js 的 ng-keyup 监听 keydown keyup事件获取 keyCode

    参考这个页面.http://www.angularjshub.com/examples/eventhandlers/keyboardevents/ Html页面代码: <input ng-mod ...