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

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>事件冒泡演示</title>

         <meta name="author" content="Administrator" />

         <script src="script/jquery-1.12.2.js" type="text/javascript"></script>

         <style type="text/css">

             #content {

                 background-color: #0000FF;

             }

             #msg {

                 background-color: #FF0000;

             }

         </style>

         <!-- Date: 2016-03-26 -->

     </head>

     <body>

         <div id="content">

             <p>

                 外层div元素

             </p>

             <span>内层span元素</span>

             <p>

                 外层div元素

             </p>

         </div>

         <div id="msg"></div>

         <script type="text/javascript">

             $(function() {

                 //对span元素添加事件

                 $("#content span").bind("click", function() {

                     var text = $("#msg").html()+"<p>内层span元素被点击！</p>";

                     $("#msg").html(text);

                 });

                 //对

                 $("#content").bind("click", function() {

                     var text = $("#msg").html()+"<p>外层div元素被点击！</p>";

                     $("#msg").html(text);

                 });

                 $("body").bind("click", function() {

                     var text = $("#msg").html()+"<p>body元素被点击！</p>";

                     $("#msg").html(text);

                 });

             });

         </script>

     </body>

 </html>

为了更好地解决这个问题，我们为事件中的function传入一个参数event，并且调用stopPropagation()方法

下面演示：

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>事件冒泡演示</title>

         <meta name="author" content="Administrator" />

         <script src="script/jquery-1.12.2.js" type="text/javascript"></script>

         <style type="text/css">

             #content {

                 background-color: #0000FF;

             }

             #msg {

                 background-color: #FF0000;

             }

         </style>

         <!-- Date: 2016-03-26 -->

     </head>

     <body>

         <div id="content">

             <p>

                 外层div元素

             </p>

             <span>内层span元素</span>

             <p>

                 外层div元素

             </p>

         </div>

         <div id="msg"></div>

         <script type="text/javascript">

             $(function() {

                 //对span元素添加事件

                 $("#content span").bind("click", function(event) {

                     var text = $("#msg").html()+"<p>内层span元素被点击！</p>";

                     $("#msg").html(text);

                     event.stopPropagation();

                 });

                 //对

                 $("#content").bind("click", function(event) {

                     var text = $("#msg").html()+"<p>外层div元素被点击！</p>";

                     $("#msg").html(text);

                     event.stopPropagation();

                 });

                 $("body").bind("click", function(event) {

                     var text = $("#msg").html()+"<p>body元素被点击！</p>";

                     $("#msg").html(text);

                     event.stopPropagation();

                 });

             });

         </script>

     </body>

 </html>

jQuery中事件冒泡问题及处理的更多相关文章

  1. JQuery中事件冒泡

    JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...

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

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

  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. 数据结构(块状链表)：COGS 1689. [HNOI2010]Bounce 弹飞绵羊

    时间限制:1 s   内存限制:259 MB [题目描述] 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地 ...

  2. C# dll玩注入！.net运行时库内置！？

    Contents Introduction Back To Fundamentals Load The CLR Fundamentals Advanced DLL Injection Fundamen ...

  3. 动态规划——B 最大高度问题

    B - LIS Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  4. 动态规划——G 回文串

    G - 回文串 Time Limit:3000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  5. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  6. 约瑟夫环问题-Java数组解决

    约瑟夫环问题说的是,n个人围成一圈,从第k个人开始沿着一个方向报数,报到第m个人时,第m个人出列,从紧挨着的下一个人(未出列)开始,求整个环中人的出列顺序.下面是我用java实现的解决方法. clas ...

  7. 《University Calculus》-chape4-导数的应用-微分中值定理

    罗尔定理:如果函数f(x)在[a,b]上连续并且在(a,b)处处可微,并且有f(a) = f(b),则我们必然何以找到一个c∈(a,b),使得f’(c) = 0. 证明:我们从函数f(x)的最大值和最 ...

  8. HDU 畅通工程系列

    畅通工程系列都是比较裸的最小生成树问题,且是中文题目,不赘述了. 1.HDU 1863 畅通工程 题意:一个省有很多村庄,其中一些之间是可以建公路的,每条公路都需要不同的代价,问代价最小的情况下将所有 ...

  9. 使用drawRect有什么影响

    用来画图,这个方法会在intiWithRect时候调用.这个方法的影响在于有touch event的时候之后,会重新绘制,很多这样的按钮的话就会比较影响效率.以下都会被调用1.如果在UIView初始化 ...

  10. CentOS6.5 mini开启网络

    1.编辑network配置 vim /etc/sysconfig/network-scripts/ifcfg-eth0 1 2 3 4 5 6 7 DEVICE=eth0 HWADDR=00:0C:2 ...