阻止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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
构建一个JavaScript插件系统
Oct 20 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
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python 实现微信防撤回功能
2019/04/29 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
简单的辞职信范文
2014/01/18 职场文书
教师个人鉴定材料
2014/02/08 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
房屋产权证明书
2014/10/15 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python