书:"Pro JavaScript Techniques 精通JavaScript"之阻止事件冒泡的通用函数

function stopBubble(e){

//如果传入了事件对象,那么就是非IE浏览器

if (e&&e.stopPropagation)

//因此它支持W3C的stopProgation()方法

e.stopProgation();

else

//否则,我们得使用IE的方式来取消事件冒泡

window.event.cancelBubble=true;

}

下面的代码展示了一个简短的片断,它会为鼠标悬停的当前元素加上红色的边框.可以通过每一个DOM元素增加mouseover和mouseout事件来实现.如果不阻止事件冒泡,每次把鼠标移到一个元素上时,该元素及其父元素都会有红色的边框,这并不如你所预期的.

使用stopBubble()来创建元素的交互集

//定位,遍历所有的DOM元素

var all=document.getElementsByTagName("*");

for (var i=0;i<all.length;i++){

//监听用户鼠标,当移动到元素上时

//为元素加上红色边框

all[i].onmouseover=function(e){

this.style.border="1px solid red";

stopBubble(e);

}

//检查用户鼠标,当移开元素时

//删除我们加上的边框

all[i].onmouseout=funtion(e){

this.style.border="0px";

stopBubble(e);

};

}