JS阻止冒泡事件和默认事件（IE和其他浏览器兼容）

最新推荐文章于 2024-07-25 20:08:25 发布

辣姐什么鬼

最新推荐文章于 2024-07-25 20:08:25 发布

阅读量5.9k

点赞数 2

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/53213444

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

冒泡事件：比如我们点击了一个元素然后从它本身开始一层一层向上的父元素都做出反应直到根元素

默认事件：像a标签的点击跳转和页面鼠标右键单击弹出菜单等都是默认事件

我们有时想要阻止这些事件需要注意的是IE浏览器和其他浏览器的兼容问题

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div onclick="show2();">
    <button onclick="show1(event)">
        按钮
    </button>
</div>
<script>
    function stopEvent(event){
        var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容
        if(window.event){       //这是IE浏览器
            e.cancelBubble=true;//阻止冒泡事件
            e.returnValue=false;//阻止默认事件
        }else if(e && e.stopPropagation){     //这是其他浏览器
            e.stopPropagation();//阻止冒泡事件
            e.preventDefault();//阻止默认事件
        }
    }
    function show1(ev){
        alert(1);
        stopEvent(ev);
    }
    function show2(){
        alert(2);
    }
</script>
</body>
</html>