阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)


Posted in Javascript onMay 08, 2007

cancelBubble在IE下有效
stopPropagation在Firefox下有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">  
<head>  
<title> 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)</title>  
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />  
<script type="text/javascript">  
function doSomething (obj,evt) {  
 alert(obj.id);  
 var e=(evt)?evt:window.event;  
 if (window.event) {  
 e.cancelBubble=true;  
 } else {  
 //e.preventDefault();  
 e.stopPropagation();  
 }  
}  
</script>  
</head>  
<body>  
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">  
 <p>This is parent1 div.</p>  
 <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">  
 <p>This is child1.</p>  
 </div>  
 <p>This is parent1 div.</p>  
</div>  
<br />  
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">  
 <p>This is parent2 div.</p>  
 <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">  
 <p>This is child2. Will bubble.</p>  
 </div>  
 <p>This is parent2 div.</p>  
</div>  
</body>  
</html> 
Javascript 相关文章推荐
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
javascript实现列表切换效果
May 02 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
JS实现点击掉落特效
Jan 29 Javascript
延时重复执行函数 lLoopRun.js
May 08 #Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 #Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 #Javascript
javascript之水平横向滚动歌词同步的应用
May 07 #Javascript
javascript之ESC(第二类混淆)
May 06 #Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 #Javascript
使用正则替换变量
May 05 #Javascript
You might like
PHP完整的日历类(CLASS)
2006/11/27 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python批量更改文件名的实现方法
2017/10/29 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
JAVA和C++的区别
2013/10/06 面试题
中间件分为哪几类
2012/03/14 面试题
毕业生求职简历的自我评价
2013/10/23 职场文书
实习鉴定范文
2013/12/19 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
高考备战决心书
2014/03/11 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
考试诚信承诺书
2014/05/23 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
学前班语言教学计划
2015/01/20 职场文书
留学推荐信中文范文
2015/03/26 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书