一个小例子解释如何来阻止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 相关文章推荐
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
vue键盘事件点击事件加native操作
Jul 27 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
C# Assembly类访问程序集信息
2009/06/13 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
基于js实现二级下拉联动
2016/12/17 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python中JWT用户认证的实现
2020/05/18 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
施工资料员岗位职责
2014/01/06 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
女生节标语
2014/06/26 职场文书
移交协议书
2014/08/19 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
合作意向书范本
2019/04/17 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android