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版轮播图效果和extend扩展
Jul 18 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 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
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
php SQL之where语句生成器
2009/03/24 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
thinkphp缓存技术详解
2014/12/09 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
JavaScript 事件系统
2010/07/22 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
会计学专业自荐信
2014/06/25 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
诉讼授权委托书
2014/10/15 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
关于Python中进度条的六个实用技巧分享
2022/04/05 Python