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

朱雀 2022-07-12 04:25 205阅读 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.

在上边代码我们可以得到两个信息：

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 获取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][Angular 1.6_http.get_..._.success is not a function]

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

[AngularJS动画（二）][AngularJS]

[Angular 1.6_http.get_..._.success is not a function]: http://blog.csdn.net/u011127019/article/details/54846710
[AngularJS_ui-router]: http://blog.csdn.net/u011127019/article/details/54616327
[AngularJS]: http://blog.csdn.net/u011127019/article/details/53668573

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 react阻止事件冒泡

react阻止事件冒泡 // 这里的handleClick事件就合成事件 <a ref="aaa" onClick={ (e)=>this.handleC

心已赠人/ 2022年12月28日 01:45/ 0 赞/ 134 阅读

相关如何阻止事件冒泡

在页面开发中，我们使用JS添加事件后，默认情况事件会向上冒泡的。 <body> <div class="parent"> <input type

秒速五厘米/ 2022年11月19日 07:42/ 0 赞/ 236 阅读

相关 Js 冒泡事件阻止

出于对作者的尊重和感谢，原文地址为 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

Bertha 。/ 2022年09月24日 00:29/ 0 赞/ 252 阅读

相关 js阻止事件冒泡

function stopHandler(event){ window.event?window.event.cancelBubble=true:eve

古城微笑少年丶/ 2022年07月13日 00:48/ 0 赞/ 270 阅读

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

一、在AngularJs中阻止事件冒泡方式 <span ng-click="func();$event.stopPropagation();"></span>

小咪咪/ 2022年07月12日 04:25/ 0 赞/ 220 阅读

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

一、在AngularJs中阻止事件冒泡方式 <span ng-click="func();$event.stopPropagation();"></span>

朱雀/ 2022年07月12日 04:25/ 0 赞/ 206 阅读

相关 AngularJs 阻止冒泡

<div class="hlyw-cf-list box-shadow" ng-repeat="cf in cfdata track by $index" ng-cli

阳光穿透心脏的1/2处/ 2022年06月05日 01:22/ 0 赞/ 164 阅读

相关阻止事件冒泡

事件的冒泡（Bubble） \- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 \- 在开发中大部分情况冒泡都是有用的,如果

红太狼/ 2022年06月01日 07:18/ 0 赞/ 317 阅读

相关 vue 阻止事件冒泡

事件修饰符在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以

墨蓝/ 2022年04月05日 12:11/ 0 赞/ 310 阅读

相关 mpvue - 阻止事件冒泡

前言 mpvue中元素嵌套都有点击触发事件，那点击里面的元素也会触发容器的点击事件。解决方法在`@click`加上`stop`属性可以阻止冒

比眉伴天荒/ 2021年07月26日 23:50/ 0 赞/ 450 阅读