IE的事件传递-event.cancelBubble示例介绍

IE的事件传递包含三个阶段：事件捕获阶段、目标元素阶段、事件冒泡阶段。当事件发生时，IE会首先从最外层元素开始，一步步地向事件的目标(被点击的元素)传递，然后再返回，并依次触发每个元素上的事件处理程序。

其中，event.cancelBubble是IE中阻止事件冒泡的方法，该方法可以被使用在事件处理程序内。

以下是两个示例说明：

示例1： 停止事件冒泡

var outer = document.getElementById('outer'),
    inner = document.getElementById('inner');

outer.onclick = function(event) {
    console.log('outer clicked');
};

inner.onclick = function(event) {
    event = event || window.event;
    event.cancelBubble = true;
    console.log('inner clicked');
};

document.onclick = function(event) {
    console.log('document clicked');
};

//如果outer先被点击，控制台会输出 'outer clicked','document clicked'
//如果inner先被点击，控制台会输出'inner clicked'

在上面的示例中，当内部元素inner被点击时，事件冒泡会被阻止，所以不会触发外部元素outer上的事件处理程序。

示例2：使用Event对象的CancelBubble属性终止冒泡事件

var checkbox = document.getElementById('checkbox');

checkbox.onclick = function(event) {
    event.cancelBubble = true;
    console.log('checkbox clicked');
};

document.onclick = function(event) {
    console.log('document clicked');
};

//无论是哪个元素被点击，都不会触发document的事件处理程序

在上面的示例中，当点击复选框checkbox时，事件冒泡会被阻止，所以不会触发document上的事件处理程序。

可以看出，在两个示例中，使用event.cancelBubble方法可以有效的阻止事件冒泡。但是需要注意的是，该方法只适用于IE浏览器，其他浏览器应该使用event.stopPropagation()来停止事件冒泡。