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 相关文章推荐
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 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二分法在IP地址查询中的应用
2008/08/12 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
意大利团购网站:Groupon意大利
2016/10/11 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
数据库专业英语
2012/11/30 面试题
运动会广播稿200字
2014/10/18 职场文书
党员剖析材料范文
2014/12/18 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python