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改变Session的值(用ajax实现)
Dec 28 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
javascript填充默认头像方法
Feb 22 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
详解Vue slot插槽
Nov 20 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
PHP操作文件方法问答
2007/03/16 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
JavaScript的Cookies
2008/01/16 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
python字典操作实例详解
2017/11/16 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
Linux上比较文件的命令都有哪些
2013/09/28 面试题
文职个人求职信范文
2013/09/23 职场文书
热门专业求职信
2014/05/24 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis