解决JS事件冒泡兼容性问题

所谓的事件冒泡是指事件的响应会像水泡一样上升至最顶级对象。有些情况下事件冒泡是人为设计的，但是大多数情况下，冒泡是需要禁止的。

/**
 * 解决事件冒泡兼容性问题
 * @param {Object} event：W3C下的事件对象
 */
function stopBubble(event) {
    if(window.event) {
        // IE浏览器
        window.event.cancelBubble = true;
    } else {
        // W3C浏览器
        event.stopPropagation();
    }
}

window.onload = function() {

    document.getElementById('div1').onclick = function() {
        alert('div1');
    }

    document.getElementById('div2').onclick = function(event) {
        alert('div2');
        // 禁止事件冒泡
        stopBubble(event);
    }

    document.getElementById('div3').onclick = function(event) {
        alert('div3');
        // 禁止事件冒泡
        stopBubble(event);
    }
}

<style>
#div1 {width:400px; height:400px; background:#f00;}
#div2 {width:300px; height:300px; background:#0f0;}
#div3 {width:200px; height:200px; background:#00f;}
</style>
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>