阻止事件冒泡

最新推荐文章于 2024-04-11 16:07:08 发布

我的前端学习笔记

最新推荐文章于 2024-04-11 16:07:08 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文章标签：阻止冒泡

本文链接：https://blog.youkuaiyun.com/u012181244/article/details/41318661

技术专栏收录该内容

39 篇文章

订阅专栏

事件冒泡的概念在此不再重复，下面主要介绍防止事件冒泡的方法：符合W3C标准的event.stopPropagation(); 和IE浏览器下的window.event.cancelBubble=true;

<html>
<head>
    <title>stopPropagation阻止冒泡cancelBubble</title>
    <style>
    body{
        color:#333;
        font-size:12px;
    }
    li{
        width: 40px;
        height:20px;
        background: orange;
        margin:4px;
    }
    </style>
    <script>
    window.onload=function(){
        var olia=document.getElementById('lia').getElementsByTagName('li');
        var olib=document.getElementById('lib').getElementsByTagName('li');

        for(var i=0;i<olia.length;i++)
        {
            olia[i].onclick=function(){
                alert('aaaali');
            };
        }

        for(var i=0;i<olib.length;i++)
        {
            olib[i].onclick=function(e){
                alert('bbbbli');
                window.event.cancelBubble=true;//IE     /重要代码
                e.stopPropagation(); //非IE  W3C标准    /重要代码
            };
        }

        document.body.onclick=function(){
            alert('bodybody');
        };
        document.onclick=function(){
            alert('document');
        };

    }
    </script>
</head>
<body>
  
        <div id="a">
            <ul id="lia">单击下面的列表.会触发body事件
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
            </ul>

            <ul id="lib">单下面的列表.不会触发body事件.
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
            </ul>
        </div>
</body>
</html>

上述代码注释中标注了阻止事件冒泡的方法，下面是针对两种方法的封装：

function stopBubble(e){
            //var e=e||window.event;
            if(e) //判断是否为非IE浏览器（非IE支持e）
            {
                e.stopPropagation(); //w3c的stopPropagation()
            }
            else
            {
                window.event.cancelBubble=true; //cancelBubble=true
            }
        }

封装后只要在不想冒泡的事件处理函数中调用stopBubble(e) 方法即可:

    <script>
    window.onload=function(){
        var olia=document.getElementById('lia').getElementsByTagName('li');
        var olib=document.getElementById('lib').getElementsByTagName('li');

        for(var i=0;i<olia.length;i++)
        {
            olia[i].onclick=function(){
                alert('aaaali');
            };
        }

        for(var i=0;i<olib.length;i++)
        {
            olib[i].onclick=function(e){
                alert('bbbbli');
                stopBubble(e);     //调用封装的组织冒泡函数  即可
                //window.event.cancelBubble=true;//IE
                //e.stopPropagation(); //非IE  W3C标准 
            };
        }

        document.body.onclick=function(){
            alert('bodybody');
        };
        document.onclick=function(){
            alert('document');
        };


        function stopBubble(e){
            //var e=e||window.event;
            if(e) //判断是否为非IE浏览器（非IE支持e）
            {
                e.stopPropagation(); //w3c的stopPropagation
            }
            else
            {
                window.event.cancelBubble=true; //cancelBubble=true
            }
        }

    }
    </script>

注意千万不要记混淆了这几个单词：IE：window.event.cencelBubble=true; W3C：event.stopPropagation();