IE的事件传递-event.cancelBubble示例介绍


Posted in Javascript onJanuary 12, 2014

关于event.cancelBubble,由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD
Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件。
例子:

<html> 
<body> 
<table border="1" width="26%" id="tableA" onclick="alert('tableA')"> 
<tr onclick="tableA_rowA_click()"> 
<td width="106">一般</td> 
</tr> 
<tr onclick="tableA_rowB_click()"> 
<td width="106">阻止消息上传</td> 
</tr> 
</table> 
<p> </p> 
</body> 
</html> 
<!-- --> 
<script language="javascript"> 
<!-- 
function tableA_rowA_click(){ 
alert('tableA_rowA'); 
} 
function tableA_rowB_click(){ 
alert('tableA_rowB'); 
event.cancelBubble=true; 
} 
//--> 
</script>

event.cancelBubble阻止事件冒泡,event.cancelBubble=true;

取消事件冒泡,在 IE 的事件机制中,触发事件会从子元素向父元素逐级上传,就是说,如果子元素触发了单击事件,那么也会触发父元素的单击事件;event.cancelBubble=true;可以停止事件继续上传补充一点,Ie的事件传递是从下到上的:

Javascript 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
js 代码优化点滴记录
Feb 19 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
canvas实现贪食蛇的实践
Feb 15 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 #Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 #Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 #Javascript
js弹窗返回值详解(window.open方式)
Jan 11 #Javascript
JS中表单的使用小结
Jan 11 #Javascript
js opener的使用详解
Jan 11 #Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 #Javascript
You might like
PHP数字格式化
2006/12/06 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python获取标准北京时间的方法
2015/03/24 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Python操作Excel之xlsx文件
2017/03/24 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
django中静态文件配置static的方法
2018/05/20 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
若干个Java基础面试题
2015/05/19 面试题
大学生毕业的自我评价分享
2014/01/02 职场文书
汽车促销活动方案
2014/03/31 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
室内趣味活动方案
2014/08/24 职场文书
担保书格式
2015/01/20 职场文书
就业意向书范本
2015/05/11 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers