js冒泡、捕获事件及阻止冒泡方法详细总结


Posted in Javascript onMay 08, 2014

javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。

事件冒泡是一个从子节点向祖先节点冒泡的过程;

事件捕获刚好相反,是从祖先节点到子节点的过程。

给一个jquery点击事件的例子:

代码如下:

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>test</title> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#clickMe').click(function(){ 
alert('hello'); 
}); 
$('body').click(function(){ 
alert('baby'); 
}); 
}); 
</script> 
</head> 
<body> 
<div style="width:100px;height:100px;background-color:red;"> 
<button type="button" id="button2">click me</button> 
<button id="clickMe">click</button> 
</div> 
</body> 
</html>

事件冒泡现象:点击 “id=clickMe” 的button,会先后出现“hello” 和 “baby” 两个弹出框。

分析:当点击 “id=clickMe” 的button时,触发了绑定在button 和 button 父元素及body的点击事件,所以先后弹出两个框,出现所谓的冒泡现象。

事件捕获现象:点击没有绑定点击事件的div和 “id=button2” 的button, 都会弹出 “baby” 的对话框。

在实际的项目中,我们要阻止事件冒泡和事件捕获现象。

阻止事件冒泡方法:

法1:当前点击事件中return false;

$('#clickMe').click(function(){ 
alert('hello'); return false; 
});

法2:
$('#clickMe').click(function(event){ 
alert('hello'); var e = window.event || event; 
if ( e.stopPropagation ){ //如果提供了事件对象,则这是一个非IE浏览器 
e.stopPropagation(); 
}else{ 
//兼容IE的方式来取消事件冒泡 
window.event.cancelBubble = true; 
} 
});

貌似捕获事件不能被阻止
Javascript 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 #Javascript
javascript中setTimeout的问题解决方法
May 08 #Javascript
在JavaScript中使用timer示例
May 08 #Javascript
JavaScript中读取和保存文件实例
May 08 #Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 #Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 #Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 #Javascript
You might like
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
如何使用Python调整图像大小
2020/09/26 Python
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
简单的大学生自我鉴定
2014/02/18 职场文书
前处理班长职位说明书
2014/03/01 职场文书
竞聘书格式及范文
2014/03/31 职场文书
财产公证书样本
2014/04/04 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
公司活动总结范文
2014/07/01 职场文书
面试感谢信范文
2015/01/22 职场文书
家装业务员岗位职责
2015/04/03 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
个人借条范本
2015/05/25 职场文书