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


Posted in Javascript onJuly 17, 2014

什么是JS事件冒泡?

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

如何来阻止Jquery事件冒泡?

通过一个小例子来解释

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Porschev---Jquery 事件冒泡</title> 

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<div id="divOne" onclick="alert('我是最外层');"> 
<div id="divTwo" onclick="alert('我是中间层!')"> 
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" 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();

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

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

2.return false;

如果头部加入的是以下代码

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

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

由此可以看出:

1.event.stopPropagation();

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)

2.return false;

事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)

还有一种有冒泡有关的:

3.event.preventDefault();

如果把它放在头部A标签的click事件中,点击“点击我”。
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度

它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

Javascript 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
javascript检测两个数组是否相似
May 19 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
iframe调用父页面函数示例详解
Jul 17 #Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 #Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 #Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 #Javascript
Express.JS使用详解
Jul 17 #Javascript
JavaScript DOM节点添加示例
Jul 16 #Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 #Javascript
You might like
php多维数组去掉重复值示例分享
2014/03/02 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
jQuery each()小议
2010/03/18 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
解决python删除文件的权限错误问题
2018/04/24 Python
python远程连接MySQL数据库
2019/04/19 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
售后专员岗位职责
2013/12/08 职场文书
基层干部十八大感言
2014/01/19 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2014年电厂工作总结
2014/12/04 职场文书
英语教师求职信范文
2015/03/20 职场文书
Java获取字符串编码格式实现思路
2022/09/23 Java/Android