书:"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);

      };

}