一个小例子解释如何来阻止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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
javascript中 try catch用法
Aug 16 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
javascript如何实现create方法
Nov 04 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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 批量替换程序的具体实现代码
2013/10/04 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python完全新手教程
2007/02/08 Python
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python函数装饰器实现方法详解
2018/12/22 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
通用C#笔试题附答案
2016/11/26 面试题
与UNIX有关的几个名词
2015/09/17 面试题
自荐信格式
2013/12/01 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
学校七一活动方案
2014/01/19 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS