在为一个元素添加事件时，经常会出现的一个问题就是事件冒泡。例如在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. 杂题 UVAoj 10000 Longest Paths

      Longest Paths  It is a well known fact that some people do not have their social abilities complet ...

  2. 数学概念——H 最美素数

    H - 数论,晒素数 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit S ...

  3. FreeMarker-TemplateLoader

    Java中不乏优秀的模板引擎,Velocity,mvel,FreeMarker等.在构建框架的时候,通常可以拿来即用,但我们需要控制它.最近需要一个数据准备的框架,便选择了FreeMarker,Fre ...

  4. 《C专家编程》读书笔记

    第一章 const float* 表示一个指向float类型常量的指针 第二章 1. 在c语言中const并非真正表示“常量”,在数组定义与case中不可以使用 2. case的一些问题 1: #in ...

  5. bind()

    首先是改变this指向问题 var altwrite = document.write; altwrite("hello"); 上面的程序运行,会报错:Uncaught TypeE ...

  6. IOS中线程的通信

    一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转到另1个线程继续执行任务 ...

  7. .net自定义控件

    一.[.net自定义控件]TextBox控件重写 之NumTextBox 参考博客:http://www.yongfa365.com/Item/NumTextBox.html 二.[.net自定义控件 ...

  8. android图片缓存框架Android-Universal-Image-Loader

    http://blog.csdn.net/king_is_everyone/article/details/34107081 最近跟同学们做了一个创业项目,其实跟以前做项目不同,以前大多数都是做web ...

  9. uva 116 Unidirectional TSP （DP）

    uva 116 Unidirectional TSP Background Problems that require minimum paths through some domain appear ...

  10. debian7 安装配置

    最近几天折腾了一下Debian 7 (gnome桌面DVD版,KDE桌面CD版最后会提到),总的来说收获还是挺大的,对比以前使用ubuntu,debian 7给我的感觉像是一个新生婴儿,不带多余的花俏 ...