一个小例子解释如何来阻止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 相关文章推荐
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python socket编程实例详解
2015/05/27 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
利用python如何处理nc数据详解
2018/05/23 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python程序 创建多线程过程详解
2019/09/23 Python
python 消费 kafka 数据教程
2019/12/21 Python
Keras设置以及获取权重的实现
2020/06/19 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
大学生在校学习的自我评价
2014/02/18 职场文书
三八妇女节标语
2014/10/09 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
异地恋情人节寄语
2015/02/28 职场文书
纪录片信仰观后感
2015/06/08 职场文书
关于车尾的标语大全
2015/08/11 职场文书