冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

下面是html代码部分：

  1. <body>
  2. <div id="content">
  3.     外层div元素
  4.     <span>内层span元素</span>
  5.     外层div元素
  6. </div>
  7.  
  8. <div id="msg"></div>
  9. </body>

对应的jQuery代码如下：

  1. <script type="text/javascript">
  2. $(function(){
  3.     // 为span元素绑定click事件
  4.     $('span').bind("click",function(){
  5.         var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
  6.         $('#msg').html(txt);// 设置html信息
  7.     });
  8.     // 为div元素绑定click事件
  9.     $('#content').bind("click",function(){
  10.         var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
  11.         $('#msg').html(txt);
  12.     });
  13.     // 为body元素绑定click事件
  14.     $("body").bind("click",function(){
  15.         var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
  16.         $('#msg').html(txt);
  17.     });
  18. })
  19. </script>

当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何防止这种冒泡事件发生呢？

修改如下：

  1. <script type="text/javascript">
  2. $(function(){
  3.        // 为span元素绑定click事件
  4.     $('span').bind("click",function(event){
  5.         var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
  6.         $('#msg').html(txt);
  7.         event.stopPropagation();    //  阻止事件冒泡
  8.     });
  9.     // 为div元素绑定click事件
  10.     $('#content').bind("click",function(event){
  11.         var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
  12.         $('#msg').html(txt);
  13.         event.stopPropagation();    //  阻止事件冒泡
  14.     });
  15.     // 为body元素绑定click事件
  16.     $("body").bind("click",function(){
  17.         var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
  18.         $('#msg').html(txt);
  19.     });
  20. })
  21. </script>

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

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

下面是案例：

  1. <script type="text/javascript">
  2. $(function(){
  3.    $("#sub").bind("click",function(event){
  4.          var username = $("#username").val();  //获取元素的值，val() 方法返回或设置被选元素的值。
  5.          if(username==""){     //判断值是否为空
  6.              $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
  7.              event.preventDefault();  //阻止默认行为 ( 表单提交 )
  8.          }
  9.    })
  10. })
  11. </script>

html部分：

  1. <body>
  2. <form action="test.html">
  3. 用户名：<input type="text" id="username" />
  4. <br/>
  5. <input type="submit" value="提交" id="sub"/>
  6. </form>
  7.  
  8. <div id="msg"></div>
  9. </body>

还有一种防止默认行为的方法就是return false。效果一样。

代码如下：

  1. <script type="text/javascript">
  2. $(function(){
  3.    $("#sub").bind("click",function(event){
  4.          var username = $("#username").val();  //获取元素的值
  5.          if(username==""){     //判断值是否为空
  6.              $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
  7.              return false;
  8.          }
  9.    })
  10. })
  11. </script>

同理，上面的冒泡事件也可以通过return false来处理。

  1. <script type="text/javascript">
  2. $(function(){
  3.        // 为span元素绑定click事件
  4.     $('span').bind("click",function(event){
  5.         var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
  6.         $('#msg').html(txt);
  7.         return false;
  8.     });
  9.     // 为div元素绑定click事件
  10.     $('#content').bind("click",function(event){
  11.         var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
  12.         $('#msg').html(txt);
  13.         return false;
  14.     });
  15.     // 为body元素绑定click事件
  16.     $("body").bind("click",function(){
  17.         var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
  18.         $('#msg').html(txt);
  19.     });
  20. })
  21. </script>

jQuery之防止冒泡事件,冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。的更多相关文章

  1. jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

    jquery 添加与删除的规律 当要添加时候要定位到自己的父元素  当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

  2. 子组件通过 $emit 触发父组件的自定义事件

    子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...

  3. 子组件通过$emit触发父组件的事件时，参数的传递

    子组件.vue <template> <div> <el-table :data="comSchemaData" highlight-current- ...

  4. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  5. JQuery阻止事件冒泡---阻止后续代码执行

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  6. jQuery阻止事件冒泡的例子

    下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...

  7. Jquery阻断事件冒泡(转载)

    JQuery阻止事件冒泡 冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个d ...

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

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

  9. 阻止事件冒泡js jquery

    jQuery之防止冒泡事件 冒泡事件就是点击子节点,会向上触发父节点.祖先节点的点击事件. 以下是html代码部分: <body> <div id="content&quo ...

随机推荐

  1. codeforces D. Painting The Wall

    http://codeforces.com/problemset/problem/399/D 题意:给出n和m,表示在一个n*n的平面上有n*n个方格,其中有m块已经涂色.现在随机选中一块进行涂色(如 ...

  2. ASP.NET服务器推送及前后台实时交互

    一:项目需求 页面需要做一个上传Excel功能,并处理Excel中的数据到数据库中 这是一个较为漫长的过程 这时我需要在页面上显示处理进度的提示,给用户一个良好的体验 比如给用户提示“正在上传文档”, ...

  3. Linux目录树

    Linux目录树(directory tree) 分层结构(不同于数据库文件系统),单个文件/目录的最大长度为255个字符,完整路径为4096个字符 特殊的文件系统 文件系统 挂载点 说明 Root ...

  4. wpa_cli和wpa_supplicant使用，配置无线AP名和密码，静态ip地址

    配置静态ip方法分享:通过串口命令行输入如下命令: 1. 添加无线网络接入点(AP) 及其 密码:# wpa_cli -p /data/misc/wpa_supplicantwpa_cli v0.5. ...

  5. 【线段树】HDU 5493 Queue (2015 ACM/ICPC Asia Regional Hefei Online)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5493 题目大意: N个人,每个人有一个唯一的高度h,还有一个排名r,表示它前面或后面比它高的人的个数 ...

  6. Delphi 为TClientdataset定义结果集，并增加记录

    Delphi 为TClientdataset定义结果集,并增加记录 procedure addDefsFieldsForCDS(aDataSet: TClientDataSet);begin  aDa ...

  7. 《A First Course in Probability》-chaper8-极限定理-各类不等式

    詹森不等式: 证明:

  8. 武汉Uber优步司机奖励政策（1月18日~1月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. 病毒侵袭 - HDU 2896（AC自动机）

    分析:有点需要注意的,输入的字符是所有可见的ASCII码,刚开始没看清一直以为是小写字母.............注意到这点后这题就是裸的自动机了.   代码如下: ================= ...

  10. XCODE 代码行统计

    find . -name "*.m" -or -name "*.h" -or -name "*.c" |xargs grep -v &quo ...