一. 什么是事件的冒泡：

     在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个程序，如果没有定义此事件处理程序或者事件返回true,那么这个事件就会向这个对象的父级对象传播，从里到外，直到它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些对象是window）。

二.如何阻止冒泡：

例子：

<body>

    <form>

        <div onclick="alert('我是最外层');">

            <div onclick="alert('我是中间层！');">

                <a href="#" onclick="alert('我是最里层！');">点击我</a>

            </div>

        </div>

    </form>

</body>

比如上面这个页面， 
分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 
他们都有各自的click事件，最里层a标签还有href属性。 
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度. 
这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。 
事件冒泡过程（以标签ID表示）：hr_three---->divTwo---->divOne。从最里层冒泡到最外层。

如何来阻止？

1.event.stopPropagation()

<body>

    <form>

        <div onclick="alert('我是最外层');">

            <div onclick="alert('我是中间层！');">

                <a href="https://www.baidu.com/" onclick="alert('我是最里层！');" id="hr_three">点击我</a>

            </div>

        </div>

    </form>

    <script>

    $(function() {

        $("#hr_three").click(function(event) {

            event.stopPropagation();

        });

    });

    </script>

</body>

这次再点击“点击我”，会弹出“我是最里层”；再会跳转到百度链接

2. return false

<body>

    <form>

        <div onclick="alert('我是最外层');">

            <div onclick="alert('我是中间层！');">

                <a href="https://www.baidu.com/" onclick="alert('我是最里层！');" id="hr_three">点击我</a>

            </div>

        </div>

    </form>

    <script>

    $(function() {

        $("#hr_three").click(function(event) {

            return false;

        });

    });

    </script>

</body>

再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面

由此可以看出：

1.event.stopPropagation(); 
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

2.returnfalse; 
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

还有一种有冒泡有关的：

3.event.preventDefault(); 
如果把它放在头部A标签的click事件中，点击“点击我”。 
会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度 
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

js 事件冒泡的更多相关文章

  1. 什么是JS事件冒泡？

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  2. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  3. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  4. 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  5. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  6. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  7. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  8. js 事件冒泡、事件捕获、stopPropagation、preventDefault

    转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...

  9. JS事件冒泡及阻止

    事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...

  10. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

随机推荐

  1. wordpress及其simple_press插件完成 的中文论坛

    wordpress 及 其simple_press插件的论坛功能 开发准备: 一直从事java及as3方面的开发,首次听同事提起PHP的wordpress,于是上网查了下, 才知道这款软件的强大,转而 ...

  2. React学习笔记

    1.React的一开始出发点是:用于开发数据不断变化的大型应用程序(Building large applications with data that changes over time) 2.生命 ...

  3. Java特性-HashMap

    想分享一个对HashMap的理解: 我们首先要知道一个HashMap对象的构成,一般的理解是:一个Map里面放了很多个键值对,合在一起就是一个键值对的数组: 大概这么理解没问题,可是有一点要说明一下, ...

  4. 黑马程序员——C语言基础 函数

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)函数的定义 1> 任何一个C语言程序都是由一个或者多个程序段( ...

  5. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...

  6. mysql 操作杂记

    SHOW VARIABLES LIKE 'character%'; SET character_set_client = utf8; SET character_set_connection = ut ...

  7. git学习心得总结

    最近学习git,应为git可以不需要服务器而在任意的Linux机器上管理代码,相对svn和cvs还是有它的优势的,所以我选用了git来管理我的小项目,以后在提供svn的管理. 在使用了一段时间后想写一 ...

  8. java之并发编程：Lock

    这是转的:http://www.cnblogs.com/dolphin0520/p/3923167.html * 在多线程编程里面一个重要的概念是锁定,如果一个资源是多个线程共享的,为了保证数据的完整 ...

  9. HeadFirst 设计模式

    一.设计原则 封装变化 多用组合,少用继承 针对接口编程,不针对实现编程 为交互对象之间的松紧耦合设计而努力 对扩展开放,都修稿关闭 依赖抽象,不要依赖具体类 最少知识原则:之和朋友交谈 好莱坞原则: ...

  10. QImage：：drawRect 和 fillRect在处理大面积区域时代价高昂

    项目需要生成一张掩码图, 出于操作pixel方便的考虑采用QImage(mono), 但在实现一个类似于 cvZero的操作时发现在图片面积较大时效率很低, 提醒一下 ps: 后来是改变策略, 用偏移 ...