AngularJS阻止事件冒泡$event.stopPropagation()

原创于 2017-02-10 14:43:47 发布 · 1.4w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#AngularJS阻止事件冒泡

收录于

AngularJs 专栏收录该内容

55 篇文章

订阅专栏

本文介绍AngularJs中如何阻止事件冒泡及使用$event获取DOM对象的方法。通过具体示例展示了如何利用$event.stopPropagation()来阻止事件冒泡，并通过$event.target获取触发事件的DOM元素。

一、在AngularJs中阻止事件冒泡方式

  <span ng-click="func();$event.stopPropagation();"></span>

或者

<button class="button button-balanced" ng-click="show($event);">加载</button>

 $scope.show = function ($event) {
                //显示加载
                $ionicLoading.show();
                $event.stopPropagation();
            }

在Angular中已经对一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick…中加入了一个变量叫做$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 获取Dom对象

<input class="unchecked" type="checkbox" ng-model="item.isCustOmized" ng-click="switchCheckBox($event, item.isCustOmized)" />

$scope.switchCheckBox = function($event, value) {  
      // console.log(value)  
      if (value) {  
        $($event.target).addClass("checked");  
      } else {  
        $($event.target).removeClass("checked");  
      }  
    }

Angular 1.6提示$http.get(...).success is not a function

AngularJS路由之ui-router（三）大小写处理

AngularJS动画（二）