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使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
javascript 常见功能汇总
Jun 11 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
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
PHP4实际应用经验篇(4)
2006/10/09 PHP
mysql5详细安装教程
2007/01/15 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python打包成so文件过程解析
2019/09/28 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
会计电算化专业求职信
2014/06/10 职场文书
环保标语口号
2014/06/13 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python