一个小例子解释如何来阻止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获取GridView选择的行内容
Apr 14 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
vue prop传值类型检验方式
Jul 30 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&amp;java(三)
2006/10/09 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python模拟登录的多种方法(四种)
2018/06/01 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
《小猪家的桃花树》教学反思
2014/04/11 职场文书
出国留学计划书
2014/04/27 职场文书
公司承诺书怎么写
2014/05/24 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
作文评语集锦
2014/12/25 职场文书
教师辞职信范文
2015/02/28 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
Pytest中conftest.py的用法
2021/06/27 Python