zoukankan      html  css  js  c++  java
  • 关于什么是事件冒泡和如何取消事件冒泡的讨论!

    在学习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;
                }
            }

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

  • 相关阅读:
    王妃
    某个奇怪的引理 学习总结
    多项式求ln,求exp,开方,快速幂 学习总结
    第二类斯特林数 学习总结
    cojs QAQ的图论题 题解报告
    cojs QAQ的序列 解题报告
    QAQ OI生涯の最后一个月
    cojs 疯狂的字符串 题解报告
    【51Nod 1238】最小公倍数之和 V3
    【51Nod 1190】最小公倍数之和 V2
  • 原文地址:https://www.cnblogs.com/liujiayun/p/5511637.html
Copyright © 2011-2022 走看看