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局部刷新页面时间具体实现
Jul 04 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 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 IN_ARRAY 函数使用注意事项
2010/07/24 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
python实现中文文本分句的例子
2019/07/15 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
工地资料员岗位职责
2013/12/31 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
学术研讨会主持词
2015/07/04 职场文书
七年级数学教学反思
2016/02/17 职场文书
学生会自荐信
2019/05/16 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
redis哨兵常用命令和监控示例详解
2021/05/27 Redis