废话少说，先来一段代码热热身：

 <!DOCTYPE html>

 <html>

 <head>

     <title>demo</title>

     <meta charset="utf-8">

     <script src="js/jquery.min.js"></script>

 </head>

 <body>

     <div id="content">

         外层div元素

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

         外层div元素

     </div>

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

 </body>

 <script>

 $(function(){

     //位span元素绑定click事件

     $("span").click(function(){

         var txt = $('#msg').html()+"<p>内层span元素被击中</p>";

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

     });

     //位div元素绑定click事件

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

         var txt = $("#msg").html()+"<p>外层的div元素被击中</p>";

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

     })

     //为body元素绑定click事件

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

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

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

     })

 })

 </script>

 </html>

网页上有两元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时<body>元素上也绑定了click事件。

当单击内部的<span>元素，即触发<span>元素的click事件时，会输出3条记录，如图所示：

只单击内部的<span>元素，就会触发<div>元素和<body>元素上的click事件，这就是由于事件冒泡引起的。

在单击<span>元素的同时，也单击了包含<span>元素的<div>元素和包含<div>元素的<body>元素，并且每一个元素都会按照特定的顺序响应click事件。

为了解决这一问题，我们在这里得提到“事件对象”这一概念：

$("element").bind("click",function(event){ //event：事件对象

})；

这样，当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能够访问到。事件处理函数执行完毕之后，事件对象就被销毁。

停止事件冒泡：

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jquery中提供了stopPropagation()方法来停止事件冒泡。

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

         var txt = $('#msg').html()+"<p>内层span元素被击中</p>";

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

         event.stopPropagation();   //停止事件冒泡

 })

这样，当单击<span>元素时，就只会输出相应的内容，而不会输出其他内容。你也可以试着给<div>元素加上该方法，效果一定不错哦！！！

jquery 中的事件冒泡的更多相关文章

  1. jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  2. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  3. JQuery中阻止事件冒泡方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function( ...

  4. 在jQuery中解决事件冒泡问题

    <pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...

  5. 你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？

    事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...

  6. 关于JQuery中的事件冒泡

    什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...

  7. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  8. 【jQuery】jQuery中的事件捕获与事件冒泡

    在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序.   一.事件冒泡( Event Bubbling)            IE 的事件流叫做事件冒泡,即 ...

  9. jquery中怎样防止冒泡事件

    jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()

随机推荐

  1. 【深入Java虚拟机】之一：Java内存模型与内存溢出

    [深入Java虚拟机]之:Java内存区域与内存溢出 高速缓存模型如下: ----------------------------------------------------分割线-------- ...

  2. SSM三大框架（转发）

    转自:SSM三大框架整合详细教程(Spring+SpringMVC+MyBatis) 使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基 ...

  3. HTTP协议学习---（五）压缩

    HTTP压缩是指: Web服务器和浏览器之间压缩传输的"文本内容"的方法. HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件. 能大大减少 ...

  4. 如何在linux Shell脚本里面把一个数组传递到awk内部进行处理

    前段时间和几位同事讨论过一个问题:Shell脚本里面怎样把一个数组传递到awk内部进行处理? 当时没有找到方法.前两天在QQ群里讨论awk的时候,无意间又聊起这个话题.机缘巧合之下找到一个思路,特此分 ...

  5. java内存空间详解

    Java内存分配与管理是Java的核心技术之一,之前我们曾介绍过Java的内存管理与内存泄露以及Java垃圾回收方面的知识,今天我们再次深入Java核心,详细介绍一下Java在内存分配方面的知识.一般 ...

  6. vim选中字符复制/剪切/粘贴

    转载自:http://www.cnblogs.com/luosongchao/p/3193153.html 问题描述: vim 中选中指定字符,进行复制/剪切/粘贴 选择:1.普通模式下--v+hjk ...

  7. wamp服务下部署禅道或其它项目时访问缓慢的解决办法

    原因其实很简单: WAMP服务默认是不支持外网访问的,如果公司内外网在一起就会引起缓慢甚至超时的问题,直接修改WAPM的配置文件让它可以访问外网即可解决问题.   解决的方法/步骤   1.解决办法: ...

  8. eclipse下查看jdk源码

    打开eclipse,点 "window"-> "Preferences" -> "Java" -> "Insta ...

  9. js base64位和c# Base64位转换

    <script> /* 编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码. 它将需要编码的数据拆分成字节数组. 以3个字节为一组.按顺序排列24 位数 ...

  10. Mysql将近两个月的记录合并为一行显示

    最近做报表统计,用到要求把近两个月的绩效作比较,并作出一些环比数据等. 场景:将1班同学的两个月的语文的平均成绩合并到一行比较. CREATE TABLE `Chinese_score` ( `id` ...