当元素多层嵌套的时候，每层都有点击事件，它就会发生冒泡，一层一层的触发，但有时候我们只想触发某一层，不想让其他层的事件触发，这就需要阻止冒泡事件了。
以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来阻止事件的冒泡
