阻止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中各种trim的实现详细解析
Dec 10 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
js数组中去除重复值的几种方法
Aug 03 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
JS 自动安装exe程序
2008/11/30 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python 编程速成(推荐)
2019/04/15 Python
python实现图片压缩代码实例
2019/08/12 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
浅析Python的命名空间与作用域
2020/11/25 Python
python实现ping命令小程序
2020/12/28 Python
2014年预备党员学习两会心得体会
2014/03/17 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
一文搞懂php的垃圾回收机制
2021/06/18 PHP