一个小例子解释如何来阻止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实现目录定位正文示例
Nov 14 Javascript
前台js调用后台方法示例
Dec 02 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
vue中是怎样监听数组变化的
Oct 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制作静态网站的模板框架(三)
2006/10/09 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
实例讲解React 组件
2020/07/07 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
关于Python面向对象编程的知识点总结
2017/02/14 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
python中时间模块的基本使用教程
2019/05/14 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python绘制雷达图实例讲解
2021/01/03 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
获奖的大学生创业计划书
2014/01/05 职场文书
房地产销售计划书
2014/01/10 职场文书
事业单位请假制度
2014/01/13 职场文书
供货协议书
2014/04/22 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android