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 相关文章推荐
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
javascript条件式访问属性和箭头函数介绍
Nov 17 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/10/09 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Django框架models使用group by详解
2020/03/11 Python
Django实现随机图形验证码的示例
2020/10/15 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
你常见到的runtime exception
2016/09/05 面试题
什么是岗位职责
2013/11/12 职场文书
报社实习生自荐信
2014/01/24 职场文书
xxx同志考察材料
2014/02/07 职场文书
党员承诺书内容
2014/03/26 职场文书
大学英语专业求职信
2014/06/21 职场文书
综合管理员岗位职责
2015/02/11 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Python利用capstone实现反汇编
2022/04/06 Python