什么是事件冒泡？知不知道阻止浏览器的默认行为？对应的原生兼容性写法该怎么写？

最新推荐文章于 2024-07-19 20:47:39 发布

会飞的小黑狗

最新推荐文章于 2024-07-19 20:47:39 发布

阅读量260

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/qq_46036334/article/details/122749751

版权

本文探讨了JavaScript中事件冒泡的概念，如何利用`stopPropagation`和`cancelBubble`防止父元素事件触发，并提供了针对不同浏览器版本的阻止默认行为（如a标签点击链接跳转）的兼容性写法。

摘要由CSDN通过智能技术生成

事件冒泡:父元素和子元素上面的话都添加的有click（不仅仅是click事件，只要保证是同一个事件即可）。子元素的click事件触发的时候，会导致该click事件冒泡到它的父元素上面，为了阻止父元素的事件触发，我们一般需要给子元素的事件里写上阻止事件冒泡的方法

//兼容性写法：
if(event.stopPropagation){
    event.stopPropagation();
}else if(event.cancelBubble){
    event.cancelBubble = true;
}

阻止浏览器默认行为:当我们不希望一些浏览器默认行为触发的时候，就需要给对应的事件添加上阻止浏览器默认行为。比如我们给a标签绑定click事件，当a标签的click事件触发之后，仍然会执行a标签自己的href

//兼容性写法：
function cDefault(e){
    if(e.preventDefault){//ie9+
        e.preventDefault();
    }else{//ie 678
   		e.returnValue = false;
    }
}

关注