JS阻止事件的传播行为

最新推荐文章于 2025-03-06 09:28:24 发布

ckinghan58

最新推荐文章于 2025-03-06 09:28:24 发布

阅读量2.2k

点赞数

分类专栏： JS 文章标签： JS传播事件阻止传播事件 JS方法 JS函数 JS阻事件

本文链接：https://blog.youkuaiyun.com/ckinghan58/article/details/72829043

版权

JS 专栏收录该内容

11 篇文章

订阅专栏

好记性不如赖笔头…………

如果用户所点击的一个区域，在另一个区域或多个区域内，且每个区域都有相同的事件，那么触发了一个区域时，就会默认触发它的父区域的事件，这显然不是我们想要，这就可以通过阻止事件传播来实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS阻止事件的传播</title>
</head>
<body>
    <div onclick="div1();">
        <div onclick="div2(event);">点我试试</div>
    </div>
</body>
<script type="text/javascript">
    function div1(){
        alert("最外层的DIV层");
    }

//  注意： IE浏览器的后面几个版本都 支持了W3C标准，之前有个别版本不支持
//          event在IE不支持的版本中，是无法接收到事件的，并且没有stopProgapation方法
//          火狐、google及最新的IE版本的结束事件都支持stopPropagation()方法来结束默认行为
//          老版本的IE如想结束默认行为，须要使用window.event.cancelBubble = true;方法

    function div2(event){
        alert("最内层的DIV层");
        if(event && event.stopPropagation){
            alert("W3C标准");
            event.stopPropagation();
        }else{
            alert("IE标准");
            window.event.cancelBubble = true;
        }
    }
</script>
</html>