阻止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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
RequireJS用法简单示例
Aug 20 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 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下获取http状态的实现代码
2014/05/09 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php include类文件超时问题处理
2015/02/06 PHP
php连接mysql数据库
2017/03/21 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
Python中使用中文的方法
2011/02/19 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python IDLE清空窗口的实例
2018/06/25 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
关于python中导入文件到list的问题
2020/10/31 Python
python3 kubernetes api的使用示例
2021/01/12 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
商场端午节活动方案
2014/01/29 职场文书
亲属关系公证书样本
2015/01/23 职场文书
史上最牛的辞职信
2015/02/28 职场文书
教师节寄语2015
2015/03/23 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python