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 15 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
第一篇初识bootstrap
Jun 21 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
js计算精度问题小结
2013/04/22 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
对Python 内建函数和保留字详解
2018/10/15 Python
wxPython实现分隔窗口
2019/11/19 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
原材料检验岗位职责
2014/03/15 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
java executor包参数处理功能 
2022/02/15 Java/Android