一个小例子解释如何来阻止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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
VueJS实现用户管理系统
May 29 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实现过滤UBB代码的类
2015/03/12 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Vue.js 表单控件操作小结
2018/03/29 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
python连接mongodb集群方法详解
2020/02/13 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
继承公证书样本
2014/04/04 职场文书
销售个人求职信范文
2014/04/28 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
自荐信大全
2019/03/21 职场文书