jQuery阻止事件冒泡实例分析


Posted in jQuery onJuly 03, 2018

本文实例讲述了jQuery阻止事件冒泡。分享给大家供大家参考,具体如下:

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

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

阻止事件冒泡的三种手段

1、return false:可以阻止默认事件和冒泡事件

2、event.stopPropagation/IE下event.cancelBubble  = true;:可以阻止冒泡事件但是允许默认事件

3、event.preventDefault();/IE下event.returnValue = false:可以阻止默认事件但是允许冒泡事件

上面的三种方法运用在不同的场景,可以合理运用,下面是代码,可以自己做一些测试:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQuery阻止冒泡</title>
  <style>
    .div1{
      width: 140px;
      border: 1px solid blue;
    }
    .div2{
      width: 100px;
      height: 100px;
      margin: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div class="div1">
  <div class="div2">
    点我呀!!!!
  </div>
</div>
<a href="http:www.baidu.com" rel="external nofollow" id="a1">百度</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $('.div1').bind('click',function(){
    alert("div1");
  });
  $('.div2').bind('click',function(){
    alert("div2");
//    return false;//也可以通过return false 阻止冒泡
    if(window.event){//IE下阻止冒泡
      event.cancelBubble = true;
    }else{
      event.stopPropagation();
    }
  });
  $('#a1').bind('click',function(){
    if(window.event){//IE下阻止默认事件
      event.returnValue = false;
    }else{
      event.preventDefault();
    }
    alert("我是链接");
    //return false;//如果不添加任何阻止事件,先弹框,后跳转,我们可以通过return false阻止跳转
  });
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

jQuery阻止事件冒泡实例分析

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 #jQuery
You might like
模仿OSO的论坛(一)
2006/10/09 PHP
php 数组的一个悲剧?
2011/05/11 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python中列表元素转为数字的方法分析
2016/06/14 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
利用python求积分的实例
2019/07/03 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2015年度团总支工作总结
2015/04/23 职场文书