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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
angularJs中$scope数据序列化的实例
Sep 30 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
Javascript复制实例详解
2016/01/28 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
简单实现js浮动框
2016/12/13 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
解决Python requests 报错方法集锦
2017/03/19 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Python实现一个论文下载器的过程
2021/01/18 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
八一慰问活动方案
2014/02/07 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python