在用javascript为DOM元素添加事件的时候，经常会遇到事件的冒泡行为，所谓冒泡行为就是如果一个页面有多层DOM控件嵌套的时候，就会建立父子关系，当父div与子div共同加入了onclick事件时，当触发子DOM的onclick事件后，子DOM进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。

所以如果只希望事件帮定到目标元素上，就需要取消事件的冒泡行为。下面提供的方法可以兼容各个浏览器来取消事件的冒泡行为。支持W3C的取消事件冒泡方法是stopPropagation()，IE浏览器取消事件冒泡的方法cancelBubble。

/*
* 功能:停止事件冒泡
*/
function stopBubble(e){
if(e&&e.stopPropagation){
//支持W3C的取消事件冒泡方法
e.stopPropagation();
}else{
//IE浏览器取消事件冒泡的方法
window.event.cancelBubble = true;
}
}
继续阅读 →