事件冒泡及阻止冒泡

事件冒泡: 当一个元素上的事件被触发的时候，如果它的父集元素也绑定了同样的事件，（比如说鼠标点击一个按钮），那么所有父集元素的事件将会一个个被触发，这一过程被称为事件冒泡（这个事件从原始元素开始一直冒泡到DOM树的最上层。）

在实际运用中，如果我们只想触发子元素的事件，并不想触发其父元素的同名事件时，就需要阻止冒泡，即取消这种机制

             

 

 

w3c的方法是：（火狐、谷歌、IE11）

event.stopPropagation()

IE10以下则是使用：event.cancelBubble = true

阻止冒泡的兼容性写法是：

 

var event = event ||window.event;

 if(event && event.stopPropagation){

            event.stopPropagation();

 }else{

            event.cancelBubble = true;

 }

注意：不是所有的事件都能冒泡，比如以下事件就不会触发冒泡：

blur, focus, load, unload, onmouseenter, onmouseleave