html 传参阻止冒泡,angular阻止冒泡事件

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

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

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

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

在对应的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});

});

});

};

}

};

}];

}

);

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

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的stopPropagation来阻止事件的冒泡

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值