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 相关文章推荐
用js的for循环获取radio选中的值
Oct 21 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
详解CocosCreator消息分发机制
Apr 16 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/02/21 PHP
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
python遍历数组的方法小结
2015/04/30 Python
详解Python中的日志模块logging
2015/06/19 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
postman传递当前时间戳实例详解
2019/09/14 Python
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
《桥》教学反思
2014/04/09 职场文书
社区文化建设方案
2014/05/02 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
植树节新闻稿
2015/07/17 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
MySQL索引失效的典型案例
2021/06/05 MySQL
java executor包参数处理功能 
2022/02/15 Java/Android
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python