阻止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 相关文章推荐
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 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
Terran兵种介绍
2020/03/14 星际争霸
php编写一个简单的路由类
2011/04/13 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP页面中文乱码分析
2013/10/29 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
理解javascript正则表达式
2016/03/08 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
ECMAScript6--解构
2017/03/30 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
职业规划书如何设计?
2014/01/09 职场文书
书香校园建设方案
2014/05/02 职场文书
工商管理本科生求职信
2014/07/13 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书