javascript阻止事件冒泡的方法

有的时候我们需要实现这样的功能：

点击某个蒙版，该蒙版消失，但是如果点击蒙版上的某个元素，希望蒙版不消失，这就需要用到阻止事件的冒泡了

html:
<div id="outer">
	<div class="inner">
		
	</div>
</div>

css:
#outer{
	100px;
	height:100px;
	background:darkgrey;
}
#outer>.inner{
	50px;
	height:50px;
	background:red;
	position:relative;
}

js:
var outer = document.querySelector('#outer');
var inner = document.querySelector('#outer>.inner');
outer.addEventListener('click',function(){
	alert('outer');
});
inner.addEventListener('click',function(e){
	e.stopPropagation();
},true);

查看效果