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;
                }
            }

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

  • 相关阅读:
    visual C sharp express from 360 free download
    Druid 在小米公司部分技术实践-博客-云栖社区-阿里云
    公司业务-猫眼知健康
    Sculptor
    可译网 —— 翻译可以更简单
    牛客网-专业IT笔试面试备考平台,最全C++JAVA前端求职题库,全面提升IT编程能力
    设置Redis的LRU策略
    springboot中使用aop技术
    elasticSearch的部署和使用
    jvm原理和代码运行的过程
  • 原文地址:https://www.cnblogs.com/liujiayun/p/5511637.html
Copyright © 2011-2022 走看看