阻止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之十一 添加事件核心方法
Jul 31 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
详解vue-cli3使用
Aug 14 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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实现将Session写入数据库
2015/07/26 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python文件去除注释的方法
2015/05/25 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python cumsum函数的具体使用
2019/07/29 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
经典c++面试题二
2015/08/14 面试题
学校春季防火方案
2014/06/08 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
django 认证类配置实现
2021/11/11 Python