在为一个元素添加事件时，经常会出现的一个问题就是事件冒泡。例如在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. COJ 3007 Mr.Yang的小助手

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=1037 试题描述: 信息学社团已经逐渐发展壮大,成员也越来越多.现在,有n个 ...

  2. cf602A Two Bases

    A. Two Bases time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  3. poj 1236强连通图缩点

    题目链接:http://poj.org/problem?id=1236 #include <cstdio> #include <cmath> #include <algo ...

  4. [置顶] 【Git入门之十四】Git GUI

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12374495 文章都快写完了,Git GUI才浮出水面,很多人要骂我,这么方 ...

  5. Hdu 3887 Counting Offspring \ Poj 3321 Apple Tree \BZOJ 1103 [POI2007]大都市meg

    这几个题练习DFS序的一些应用. 问题引入: 给定一颗n(n <= 10^5)个节点的有根树,每个节点标有权值,现有如下两种操作: 1.C x y     以节点x的权值修改为y. 2.Q x ...

  6. Struts2获取request三种方法

    Struts2获取request三种方法   struts2里面有三种方法可以获取request,最好使用ServletRequestAware接口通过IOC机制注入Request对象. 在Actio ...

  7. 将对象格式的style转换为字符串格式

    var style = { position:'absolute', background:'red', width:'2px', height:'2px', color:'#fff', top:x, ...

  8. UIScrollView控件详解

    一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可 ...

  9. Hadoop与HBase中遇到的问题

    1. Hadoop中遇到的问题 曾经所遇到的问题因为没有记录,所以忘了 (1)NameNode没有启动成功, 是因为你对HDFS多次格式化,导致datanode中与namenode中的VERSION文 ...

  10. 使用XStream注解实现Java对象与XML互相转换的代码示例

    本文记录一下使用xstream这个api的注解特性对Java对象与XML字符串相互转换的一些代码示例.    我们很多人都处理过XML文件,也有很多非常成熟的第三方开源软件.如:jdom.dom4j等 ...