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 相关文章推荐
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
JS实现瀑布流效果
Mar 07 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
js面向对象编程总结
2017/02/16 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Python 常用string函数详解
2016/05/30 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python if语句知识点用法总结
2018/06/10 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
几款好用的python工具库(小结)
2020/10/20 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
德国帽子专家:Hutshopping
2019/11/03 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
类的核心特性有哪些
2014/01/01 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
入党个人总结范文
2015/03/02 职场文书
雷锋电影观后感
2015/06/10 职场文书
九年级化学教学反思
2016/02/22 职场文书