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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
javascript实现滚动条效果
Mar 24 Javascript
vue实现简单跑马灯效果
May 25 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
javascript动态加载三
2012/08/22 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
python3 读写文件换行符的方法
2018/04/09 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Mac安装python3的方法步骤
2019/08/09 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
自主招生自荐书
2013/11/29 职场文书
绿色环保演讲稿
2014/05/10 职场文书
求职信模板
2014/05/23 职场文书
工作散漫检讨书
2014/09/16 职场文书
红色电影观后感
2015/06/18 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript