事件冒泡及阻止冒泡

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

发布了41 篇原创文章 · 获赞 65 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/cindy647/article/details/81007900