阻止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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
原生js调用json方法总结
Feb 22 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
layui table 参数设置方法
Aug 14 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
手写实现JS中的new
Nov 07 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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
Opacity.js
2007/01/22 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
Python回调函数用法实例详解
2015/07/02 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python保存网页图片到本地的方法
2018/07/24 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
自我鉴定范文300字
2013/10/01 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
信息合作协议书
2014/10/09 职场文书
放弃继承权公证书
2015/01/23 职场文书
地震捐款简报
2015/07/21 职场文书
小学语文教学反思范文
2016/03/03 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS