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