一个小例子解释如何来阻止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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
javascript事件问题
Sep 05 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
linux 下实现python多版本安装实践
2014/11/18 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Anaconda入门使用总结
2018/04/05 Python
Python中 map()函数的用法详解
2018/07/10 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
给医务人员表扬信
2014/01/12 职场文书
先进学校事迹材料
2014/12/30 职场文书
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
Python作用域和名称空间的详细介绍
2022/04/13 Python