利用JQuery阻止事件冒泡


Posted in Javascript onDecember 01, 2016

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

我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡。

通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡。

<style>
 #content{
  width: 140px;
  border: 1px solid blue;
 }
 #msg{
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 1px solid red;
 }
</style>
<body>
  <div id="content">
 外层div
 <div id="msg">
  内层div
 </div>
 </div>

</body>

显示结果

利用JQuery阻止事件冒泡

对应的jQuery代码如下:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(function(){
 // 为内层div绑定click事件
 $("#msg").click(function(){
  alert("我是小div");
 });
 // 为外层div元素绑定click事件
 $("#content").click(function(){
  alert("我是大div");
 });
 // 为body元素绑定click事件
 $("body").click(function(){
  alert("我是body");
 });
 });
 </script>

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

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

修改如下:

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

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

html部分

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

利用JQuery阻止事件冒泡

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

//阻止默认行为 ( 表单提交 )
                    event.preventDefault(); 
还有一种防止默认行为的方法就是return false。效果一样。

代码如下:

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

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

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(function(){
 // 为内层div绑定click事件
 $("#msg").click(function(event){
  alert("我是小div");
  //event.stopPropagation(); // 阻止事件冒泡
  return false;
 });
 // 为外层div元素绑定click事件
 $("#content").click(function(event){
  alert("我是大div");
  //event.stopPropagation(); // 阻止事件冒泡
   return false;
 });
 // 为body元素绑定click事件
 $("body").click(function(event){
  alert("我是body");
  //event.stopPropagation(); // 阻止事件冒泡
  return false;
 });
 });

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery中before()方法用法实例
Dec 25 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
js如何打印object对象
Oct 16 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 #Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 #Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 #Javascript
jQuery中ajax错误调试分析
Dec 01 #Javascript
JQuery学习总结【二】
Dec 01 #Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 #Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
You might like
apache php模块整合操作指南
2012/11/16 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
自动更新作用
2006/10/08 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
中层干部岗位职责
2013/12/18 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
mysql脏页是什么
2021/07/26 MySQL
Python中可变和不可变对象的深入讲解
2021/08/02 Python
什么是SOLID
2022/03/24 Javascript
openstack云计算keystone组件工作介绍
2022/04/20 Servers
mysql sock 文件解析及作用讲解
2022/07/15 MySQL