javascript阻止事件冒泡

事件冒泡是javascript的机制:

<div class="model-menu" id="model-menu">
	<div class="model-border box" id="box"></div>
	<div class="model-border box-toggle" id="box-toggle" style="display:none"></div>
</div>

document.getElementById('box').onclick = function(){
	console.info('btn');
}
document.getElementById('box-toggle').onclick = function(){
	console.info('btn');
}

当#box执行onclick事件是，冒泡机制也会出发#box-toggle的onclick事件，javascript的这种机制目的，我理解不透。为了让#box-toggle的事件不被冒泡触发，可以通过阻止冒泡函数来实现：

function stopBubble(e) {
	//如果提供了事件对象，则这是一个非IE浏览器
	if (e && e.stopPropagation)
		//因此它支持W3C的stopPropagation()方法
		e.stopPropagation();
	else
		//否则，我们需要使用IE的方式来取消事件冒泡
		window.event.cancelBubble = true;
}

附一个阻止冒泡的实例，吧js扩展名该成html：

https://files.cnblogs.com/ksfer/stopBubble.js