阻止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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
JS代码编译器Monaco使用方法
Jun 11 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 用数组降低程序的时间复杂度
2009/12/04 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
node创建Vue项目步骤详解
2020/03/06 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
python接入支付宝的实例操作
2020/07/20 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
学生鉴定评语大全
2014/05/05 职场文书
授权委托书范文
2014/07/31 职场文书
平遥古城导游词
2015/02/03 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
2019公司管理制度
2019/04/19 职场文书
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android