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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
JavaScript流程控制(分支)
Dec 06 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
让焦点自动跳转
2006/07/01 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
vue filters的使用详解
2018/06/11 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
幼儿园安全检查制度
2014/01/30 职场文书
实习单位鉴定评语
2014/04/26 职场文书
教师节横幅标语
2014/10/08 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
付款承诺函范文
2015/01/21 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
网络舆情信息简报
2015/07/21 职场文书
母亲节感言
2015/08/03 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android