事件冒泡: 当一个元素上的事件被触发的时候,如果它的父集元素也绑定了同样的事件,(比如说鼠标点击一个按钮),那么所有父集元素的事件将会一个个被触发,这一过程被称为事件冒泡(这个事件从原始元素开始一直冒泡到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