阻止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 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
中止javascript执行的方法
Feb 14 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JS使用new操作符创建对象的方法分析
May 30 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实现单链表的实例代码
2013/03/22 PHP
yii中widget的用法
2014/12/03 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python赋值操作方法分享
2013/03/23 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
新护士岗前培训制度
2014/02/02 职场文书
个人党性剖析材料
2014/02/03 职场文书
代理协议书
2014/04/22 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
企业计划生育责任书
2015/05/09 职场文书
婚礼答谢词范文
2015/09/29 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
用Python爬取某乎手机APP数据
2021/06/15 Python
修改并编译golang源码的操作步骤
2021/07/25 Golang
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技