javascript 事件冒泡与取消冒泡

Posted 2020-10-31 叶子玉

事件冒泡：当一个元素上的事件被触发时，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先中被触发，这一过程被称为事件冒泡。

这个事件从原始祖先开始，一直冒泡到DOM树的最上层。（bug）

（本来应该一人做事一人当，结果我做错了事，你却去告诉了我妈）

简单来说，冒泡就是：子元素事件被触动，父盒子的同样事件也会被触动。

取消冒泡就是取消这种机制。

 

阻止冒泡：

火狐、谷歌、IE11：event.stopPropagation();

IE10以下：event.cancelBubble = true;

兼容代码：

a.onclick = function (event) {

//阻止冒泡
event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}

}