深入理解jQuery之防止冒泡事件


Posted in Javascript onMay 24, 2016

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

下面是html代码部分:

<body>
<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>

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

对应的jQuery代码如下:

<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
    $('#msg').html(txt);// 设置html信息
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

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

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

修改如下:

<script type="text/javascript">
$(function(){
    // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
    event.stopPropagation();  // 阻止事件冒泡
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(event){
    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
    event.stopPropagation();  // 阻止事件冒泡
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

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

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

下面是案例:

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

html部分:

<body>
<form action="test.html">
用户名:<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

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

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

代码如下:

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

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

<script type="text/javascript">
$(function(){
    // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
    return false;
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(event){
    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
    return false;
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

以上这篇深入理解jQuery之防止冒泡事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
纯JS实现五子棋游戏
May 28 Javascript
30分钟快速掌握Bootstrap框架
May 24 #Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 #Javascript
深入理解jQuery中的事件冒泡
May 24 #Javascript
jQuery 弹出层插件(推荐)
May 24 #Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 #Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 #Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 #Javascript
You might like
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python 公共方法汇总解析
2019/09/16 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python 安装impala包步骤
2020/03/28 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
Overload和Override的区别
2012/09/02 面试题
Java基础面试题
2012/11/02 面试题
助学贷款贫困证明
2014/09/23 职场文书
升职自荐信范文
2015/03/27 职场文书
奖金申请报告模板
2015/05/15 职场文书
党员反邪教心得体会
2016/01/15 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android