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

    微信公众平台开发者文档 RESTful API 设计最佳实践 登录判断写去接口里 PUT 新建一个资源POST 更新一个资源GET 查看一个资源DELETE 删除一个资源

  2. Majority Element II——LeetCode

    Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The algorit ...

  3. HDOJ(HDU) 2113 Secret Number(遍历数字位数的每个数字)

    Problem Description 有一天, KIKI 收到一张奇怪的信, 信上要KIKI 计算出给定数各个位上数字为偶数的和. eg. 5548 结果为12 , 等于 4 + 8 KIKI 很苦 ...

  4. zoj 3462

    #include <cstdio> #include <cmath> #include <algorithm> #include <iostream> ...

  5. 如何让自己的类用 copy 修饰符？如何重写带 copy 关键字的 setter？

    出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙,目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu 若想令自己所写的对象具有拷贝功能,则需实现 N ...

  6. windows server作为文件服务器如何精细控制权限

    最近使用windows server 2003搭建了文件服务器,对于其中关于共享文件权限的精细控制有了较深的体会. 当前实现基本的共享文件目录结构是(上传图片真心费劲,大家将就一下吧): |--部门1 ...

  7. 如何看懂Code128条形码

    条形码就是我们看到的商品上有的那些竖条条. 要不是项目上用到这个或许我一辈子也不会对那个感兴趣. 条形码其实是分成很多类的,虽然他们看起来都差不多…… 常见的条形码的码制被称为39码.128码.417 ...

  8. [转载]Android利用convertView优化ListView性能

    本的getView写法 Java代码public View getView(int position, View convertView, ViewGroup parent) {View view = ...

  9. C primer plus 读书笔记第十四章

    这一章主要介绍C语言的结构和其他数据形式,是学习算法和数据结构的重点. 1.示例代码 /*book.c -- 仅包含一本书的图书目录*/ #include <stdio.h> #defin ...

  10. TI C66x DSP 系统events及其应用 - 5.10（创建ISR的三种情况）

    ISFP是服务中断的指令包,创建ISR的三种情况: 1.一个ISFP包的8条指令就能够满足ISR watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5ZW ...