一个小例子解释如何来阻止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将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 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生成简单的验证码
2016/06/01 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
js数组的操作详解
2013/03/27 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
小学生成长感言
2014/01/30 职场文书
优秀党员个人总结
2015/02/14 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
导游词之云南丽江古城
2019/09/17 职场文书