angular阻止冒泡事件

当元素多层嵌套的时候，每层都有点击事件，它就会发生冒泡，一层一层的触发，但有时候我们只想触发某一层，不想让其他层的事件触发，这就需要阻止冒泡事件了。

以angular项目为例，我们都知道angularJS中的执行方法都会自带一个$event，这个$event就是当前事件的对象，通过它来阻止冒泡。

在html中写一个ng-click事件：

• 注意给方法传递参数 $event.

<div class="cloudnet" >
    <button ng-click="vpc.test($event)" id="vfwBtn" style="width: 47px;height: 45px;display: inline-block;margin-top:116px;margin-left: 9px;background: none;"></button>
</div>

在对应的controller中，添加阻止冒泡：

• 触发事件，传参数 $event
• 在事件中添加 $event.stopPropagation(); 阻止冒泡。

   self.test = function($event){
                $('#showMenus').css('display', 'block');
                $event.stopPropagation();
  }

---

更官方的示例：

查看angular的官方api文档，可以看出，angular对ng事件（例如：ng-click、ng-blur、ng-dblclick等等），添加了一个$event变量。

其实无论是js还是jq抑或是angular，阻止冒泡的关键都在于抓取event/$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来阻止事件的冒泡