阻止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 UI 应用不同Theme的办法
Sep 12 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
Sea.JS知识总结
May 05 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
延时重复执行函数 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 分库分表hash算法
2009/11/12 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
让python在hadoop上跑起来
2016/01/27 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
元旦寄语大全
2014/04/10 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
举起手来观后感
2015/06/09 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
大学生党课感想
2015/08/11 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS