AngularJS阻止事件冒泡$event.stopPropagation()-蒲公英云

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

朱雀 2022-07-12 04:25 295阅读 0赞

一、在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");  
      }  
    }