阻止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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
原生js实现随机点名
Jul 05 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
纯JS实现五子棋游戏
2020/05/28 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python删除n行后的其他行方法
2019/01/28 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
小学运动会表扬稿
2014/01/19 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
会计岗位职责范本
2015/04/02 职场文书
行政复议答复书
2015/07/01 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
电力培训学习心得体会
2016/01/11 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python