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 脚本将当地时间转换成其它时区
Mar 19 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 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实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
python实现爬取图书封面
2018/07/05 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
学术诚信承诺书
2014/05/26 职场文书
司机岗位职责说明书
2014/07/29 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
新郎结婚感言
2015/07/31 职场文书
诉讼和解协议书
2016/03/23 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android