一个小例子解释如何来阻止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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
JS+CSS实现过渡特效
Jan 02 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引用(&amp;)
2014/09/04 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python sorted函数的小练习及解答
2019/09/18 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
编辑个人求职信范文
2013/09/21 职场文书
个性大学生自我评价
2013/12/04 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
代理班主任的自我评价
2014/02/04 职场文书
村干部培训班主持词
2014/03/28 职场文书
骨干教师个人总结
2015/02/11 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL