一个小例子解释如何来阻止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代码优化 事件委托篇
Nov 01 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 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数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
Python正则表达式介绍
2012/08/06 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python实现顺时针打印矩阵
2019/03/02 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Django实现网页分页功能
2019/10/31 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
竞聘上岗演讲
2014/05/19 职场文书
销售活动策划方案
2014/08/26 职场文书
个人授权委托书样本
2014/09/13 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
教师个人年度总结
2015/02/11 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
Python 如何实现文件自动去重
2021/06/02 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
详解在OpenCV中如何使用图像像素
2022/03/03 Python