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做拖动布局的思路
May 31 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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读取XML值的代码(推荐)
2011/01/01 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php批量删除操作代码分享
2017/02/26 PHP
java解析json方法总结
2019/05/16 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
javascript打印输出json实例
2013/11/11 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
商场父亲节活动方案
2014/08/27 职场文书
公积金具结保证书
2015/05/11 职场文书
七年级思品教学反思
2016/02/20 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
浅谈Java父子类加载顺序
2021/08/04 Java/Android
PyTorch中permute的使用方法
2022/04/26 Python
关于的python五子棋的算法
2022/05/02 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技