在为一个元素添加事件时，经常会出现的一个问题就是事件冒泡。例如在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. Light OJ 1018 - Brush (IV)

    题目大意:     一个二维平面上有N个点,一把刷子,刷一次可以把一条线上的所有点都刷掉.问最少刷多少次,可以把全部的点都刷完 状态压缩DP, 用记忆化搜索来写, 需要有个优化不然会超时. ===== ...

  2. Light OJ 1004 - Monkey Banana Problem（DP）

    题目大意: 给你一菱形的数字阵,问从最上面走到最下面所能获得的最大值是多少? #include<cstdio> #include<cstring> #include<io ...

  3. Watch OS2.0开发概述

    (注:尊重劳动成果,转载请注明出处 http://www.cnblogs.com/xiaochunle/p/4620230.html ) Watch OS 2.0时代 北京时间2015年6月9日,WW ...

  4. 【转】android ListView详解---- 不错不错

    原文网址:http://www.cnblogs.com/allin/archive/2010/05/11/1732200.html 由于google doc 很多人都打不开,故更新了源码下载地址 [源 ...

  5. 数据结构（LCT动态树）：BZOJ 1036: [ZJOI2008]树的统计Count

    1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 12266  Solved: 4945[Submit ...

  6. 贪心：SPOJ Backup Files

    BACKUP - Backup Files no tags  You run an IT company that backs up computer data for large offices. ...

  7. 数据结构——Currency System in Geraldion

    题目: Description A magic island Geraldion, where Gerald lives, has its own currency system. It uses b ...

  8. C++中delete和 delete[]的区别

    总的原则是,如果是用new[]创建的,则用delete[]删除,如果是用new创建的,则用delete删除. 对于基本类型,比如char *p=new char[20];如果删除时,delete p和 ...

  9. AGG 之贝塞尔插值

    原文: http://liyiwen.iteye.com/blog/705489 之前 comp.graphic.algorithms 上有一个讨论,是关于怎么样使用曲线对多边形进行插值处理,使得最终 ...

  10. Lucene 4.10.2开发示例

    这里面用的是比较新的Lucene4.10.2 做的一个实例.(lucene的索引不能太大,要不然效率会很低.大于1G的时候就必须考虑分布索引的问题) 先介绍一下Lucene的几个参数意义: Index ...