JQuery中事件冒泡

定义

在一个对象上触发某类事件，就会执行此事件程序，如果没有处理事件就会向这个对象的父级对象传播 直至它被处理，最顶层老大为document对象。

作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上）

阻止事件气泡

事件气泡有时是不需要的 通过event.stopPropagation() 或者event.preventDefault()组织 ----合并写法：return false；

解决思路

假如页面中有一个模块1，模块1中有又一个模块2，模块2中有个模块3，如果点击模块3中的触发事件，如没有处理程序，他就会向模块2执行，模块2没有继续向模块1执行，此为一个冒泡事件，如果想在模块3就终止需要---return false

具体实例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .father {width: 500px;height: 500px;background: pink;}
            .son {width: 250px;height: 250px;background: red; }
            .grandson {width: 150px;height: 150px; background: gold;}
        </style>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script>
                $(function(){
                            var $box1 = $('.father');
                        var $box2 = $('.son');
                           var $box3 = $('.grandson');
                        $box1.click(function() {
                            alert('father');
                                });
                                
                        $box2.click(function() {
                               alert('son'); return false;
                                });
                                
                        $box3.click(function(event) {
                               alert('grandson');
                            return false;
                                });
//                         $(document).click(function(event) {
//                          alert('grandfather');
//                              });
                             })    
        </script>
    </head>
    <body>
        <div class="father">
            <div class="son">
                <div class="grandson"></div>
    </div>
</div>
    </body>
</html>

易错点

return false 写在函数内部

JQuery中事件冒泡的更多相关文章

  1. 恶补jquery(四)jquery中事件--冒泡

    事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...

  2. jQuery中事件冒泡问题及处理

    在为一个元素添加事件时,经常会出现的一个问题就是事件冒泡.例如在div中嵌套了一个span元素,为div和span都添加了事件点击,如果点击span会导致span和div元素相继触发监听事件.顺序是从 ...

  3. Jquery阻断事件冒泡(转载)

    JQuery阻止事件冒泡 冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个d ...

  4. jquery取消事件冒泡的三种方法展示

    jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...

  5. jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery中防止冒泡事件

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  7. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  8. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  9. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

随机推荐

  1. js 正则常用函数

    正则表达式中,需要转义的字符: * . ? + $ ^ [ ] ( ) { } | \ / let reg = /\d+/g let str = 'ad/23/dfww/454/6' 1. reg.t ...

  2. token 和 服务器端auth0-JWT包的使用

    移动客户端和服务器端在用户登录上经常使用的是一个叫做token的认证方法 token是什么? token顾名思义, 令牌, 意思就是说,第一次用户登录验证之后,服务器返回一个token令牌,之后客户端 ...

  3. C#-MDI-多窗口通信方法总结

    总结C#中窗体间传递数据的几种方法 (由别人的方法整理) 转自:http://blog.csdn.net/daisy423xu/article/details/1579854 在编写C#windows ...

  4. UltraISO制作U盘启动盘教程

    Step 1: 首先需要安装UltraISO,完成安装后打开软碟通,文件->打开,打开我们的iso镜像 安装包可以百度搜索 Step 2:然后选择我们的U盘 Step 3:然后点击启动-> ...

  5. Python学习---网页爬虫[下载图片]

    爬虫学习--下载图片 1.主要用到了urllib和re库 2.利用urllib.urlopen()函数获得页面源代码 3.利用正则匹配图片类型,当然正则越准确,下载的越多 4.利用urllib.url ...

  6. 8个PHP数组面试题

    1.写函数创建长度为10的数组,数组中的元素为递增的奇数,首项为1. 代码如下: <?php function arrsort($first,$length){ $arr = array(); ...

  7. SSH端口三种转发方式

    本地转发 假设有ssh服务器B,telnet服务器C被防火墙与外界隔离,此时外部主机A无法直接访问C服务器. 此时可以通过本地转发的方式让A与C借助B服务器通过ssh协议通信. client fire ...

  8. Win10离线安装.NET Framework 3.5的方法技巧（附离线安装包下载）

    原文链接: https://www.windows10.pro/win10-net-framework-3-5/ 在Windows10中,当我们安装某些软件的时候会提示“你的电脑上的应用需要使用以下W ...

  9. codeforces 420D Cup Trick

    codeforces 420D Cup Trick 题意 题解 官方做法需要用到线段树+平衡树(? 如果数据小的话似乎可以用莫队).然后代码好长好长.我补了一个只要用到树状数组的做法. 代码 #inc ...

  10. 2、Node.js 第一个应用

    内容:三种变量申明方式,Node.js应用组成,第一个应用创建+代码 ################################################################# ...