阻止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实战之品牌展示列表效果
Apr 10 Javascript
采用call方式实现js继承
May 20 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
vue 自动化路由实现代码
Sep 03 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
js实现抽奖的两种方法
Mar 19 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript多线程详解
2015/08/12 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
如何对python的字典进行排序
2020/06/19 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
python 解决函数返回return的问题
2020/12/05 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
机电职业生涯规划书范文
2014/03/08 职场文书
2015年保送生自荐信
2015/03/24 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Python如何把不同类型数据的json序列化
2021/04/30 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL