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 前的按键判断代码
Mar 19 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
jquery延迟对象解析
2016/10/26 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
python GUI模拟实现计算器
2020/06/22 Python
迪奥官网:Dior.com
2018/12/04 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
写给老婆的检讨书
2014/02/21 职场文书
活动总结书
2014/05/08 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
董存瑞观后感
2015/06/11 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
django学习之ajax post传参的2种格式实例
2021/05/14 Python
pandas数值排序的实现实例
2021/07/25 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏