一个小例子解释如何来阻止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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
动态加载js的方法汇总
Feb 13 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
小程序转发探索示例
Feb 19 Javascript
react同构实践之实现自己的同构模板
Mar 13 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解析RSS的方法
2015/03/05 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
django queryset相加和筛选教程
2020/05/18 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
班长自荐书范文
2014/02/11 职场文书
五好家庭事迹材料
2014/12/20 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL