jquery 事件冒泡的介绍以及如何阻止事件冒泡


Posted in Javascript onDecember 25, 2012

什么是JS事件冒泡?
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

如何来阻止Jquery事件冒泡?
通过一个小例子来解释

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%> 
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlns="http://www.w3.org/1999/xhtml"> 
<headrunat="server"> 
<title>Porschev---Jquery事件冒泡</title> 
<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script> 
</head> 
<body> 
<formid="form1"runat="server"> 
<divid="divOne"onclick="alert('我是最外层');"> 
<divid="divTwo"onclick="alert('我是中间层!')"> 
<aid="hr_three"href="http://www.baidu.com"mce_href="http://www.baidu.com"onclick="alert('我是最里层!')">点击我</a> 
</div> 
</div> 
</form> 
</body> 
</html>

比如上面这个页面,
分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;
他们都有各自的click事件,最里层a标签还有href属性。
运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.
这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。
事件冒泡过程(以标签ID表示):hr_three---->divTwo---->divOne。从最里层冒泡到最外层。

如何来阻止?
1.event.stopPropagation();

<scripttype="text/javascript"> 
$(function(){ 
$("#hr_three").click(function(event){ 
event.stopPropagation(); 
}); 
}); 
<script>

再点击“点击我”,会弹出:我是最里层,然后链接到百度

2.returnfalse;
如果头部加入的是以下代码

<scripttype="text/javascript"> 
$(function(){ 
$("#hr_three").click(function(event){ 
returnfalse; 
}); 
}); 
<script>

再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面

由此可以看出
1.event.stopPropagation();
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)
2.returnfalse;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)
还有一种有冒泡有关的:
3.event.preventDefault();
如果把它放在头部A标签的click事件中,点击“点击我”。
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

Javascript 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
js本地图片预览实现代码
Oct 09 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
vue实现循环滚动列表
Jun 30 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 #Javascript
js 取时间差去掉周六周日实现代码
Dec 25 #Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 #Javascript
Knockoutjs快速入门(经典)
Dec 24 #Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 #Javascript
javascript 星级评分效果(手写)
Dec 24 #Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 #Javascript
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
javascript中一些util方法汇总
2015/06/10 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
Python中的并发编程实例
2014/07/07 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
django 环境变量配置过程详解
2019/08/06 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python @property及getter setter原理详解
2020/03/31 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python使用建议技巧分享(三)
2020/08/18 Python
C语言变量的命名规则都有哪些
2013/12/27 面试题
一个C/C++编程面试题
2013/11/10 面试题
工作自荐信
2013/12/11 职场文书
2014年财务部工作总结
2014/11/11 职场文书
解除租房协议书
2014/12/03 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
JavaScript实现简单的音乐播放器
2022/08/14 Javascript