阻止冒泡（默认）事件（兼容IE8）

看下面HTML代码：

 

<div onclick="parentClicked()">
    点击我（父元素）
    <div onclick="childClicked()">
        点击我（子元素）
    </div>
</div>
<script>
function childClicked(event) {
    alert('child clicked');
}
function parentClicked(event) {
    alert('parent clicked');
}
</script>

 

上述代码运行后，点击"点击我（子元素）"文本，会发现不仅会弹出parent clicked提示，还会弹出child clicked提示，这就是js操作HTML Dom元素时的冒泡问题。关于冒泡问题，可以百度看看相关文章，比如http://www.jb51.net/article/42492.htm。

 

在这里，我们如果要阻止冒泡事件，往往会使用event.stopPropagation()方法阻止事件冒泡到父级元素。但这个方法在IE8中并不能使用。在IE8中，需要使用来阻止冒泡，所以有如下包裹函数：

 

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

 

 

这里顺便说一下，阻止默认事件也是有这个问题，下面的代码就就实现了点击A标签并不会跳转：

 

<a href="www.baidu.com" onclick="clicked()">点击我并不会跳转</a>
<script>
function stopDefault( e ) {
     // 阻止默认浏览器动作(W3C)
     if ( e && e.preventDefault ) {
         e.preventDefault();
     } else {
        // IE中阻止函数器默认动作的方式
        window.event.returnValue = false;
    }
    return false;
}
function clicked(event) {
    stopDefault(event);
    alert("我阻止了点击A标签的默认事件");
}
</script>