关于什么是事件冒泡和如何取消事件冒泡的讨论!

在学习jQuery的过程中我们肯定会碰到这样一个问题,那就是事件冒泡,那么,何为事件冒泡呢?

事件冒泡通俗点讲就是,当你的子元素父元素注册了同一个事件的时候,当你激活子元素的时候,父元素也会跟着被激活

显然,这并不是我们所需要的结果!所以我们就要想办法取消事件冒泡

具体实例如下

<body>
    <div id="mybigdiv">
        我是大div
        <div id="myid">我是小div</div>
    </div>
</body>

在这里我的大div中嵌套了一个小的div,也就是说 大div有一个子集小div

在jQuery代码中

 $(function () {
            $("#myid").click(function () {
                alert('我是子元素的单击事件');
                //阻止事件冒泡
                //stop();
            });
            $("#mybigdiv").click(function () {
                alert('我是父级元素的单击事件');
            });
            
        });

我同时给大div和小div都注册了点击事件,此时阻止事件冒泡的代码是被注解掉的,那么此时我单击小div的时候会出现什么情况呢?

结果是 会先弹出  我是子元素的单击事件  紧接着 会弹出  我是父级元素的单击事件   这样的结果是我们不希望看到的,因为这造成了事件冒泡

所以我的解决方案如下  声明一个阻止事件冒泡的函数  stop() 具体内容如下

 

 //解决事件冒泡的方法
        function stop() {
            //判定浏览器引擎是IE还是其他浏览器
            event = event || window.event;
            if (event.stopPropagation) {
                //非IE浏览器
                event.stopPropagation();
            } else {
                //IE浏览器
                event.cancelBubble = true;
            }
        }

 

然后在子元素的单击事件里调用这个函数即可解决事件冒泡问题了! 

 

posted @ 2016-05-20 12:30  巴黎的雨季  阅读(1440)  评论(0编辑  收藏  举报