DIV外区域Click后关闭DIV的实现代码


Posted in Javascript onDecember 21, 2011

阻止冒泡:
1、stopPropagation()对于非IE浏览器。
2、cancelBubble属性为true,对于IE浏览器,
而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation();

<style> 
body 


{ 
background:black; 



} 
#myDiv 



{ 
background: #fff; 
width:250px; 
height:250px; 
display:none; 



} 

</style> 
<div id="myDiv"> 
This is a div; 
</div> 
<input id="btn" type="button" value="显示DIV" /> 
<script type="text/javascript"> 


var myDiv = $("#myDiv"); 
$(function () { 
$("#btn").click(function (event) { 
showDiv();//调用显示DIV方法 
$(document).one("click", function () {//对document绑定一个影藏Div方法 
$(myDiv).hide(); 
}); 
event.stopPropagation();//阻止事件向上冒泡 
}); 
$(myDiv).click(function (event) { 
event.stopPropagation();//阻止事件向上冒泡 
}); 
}); 


function showDiv() { 
$(myDiv).fadeIn(); 
} 
</script>
Javascript 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
ie 调试javascript的工具
Apr 29 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
用JSON做数据传输格式中的一些问题总结
Dec 21 #Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 #Javascript
这段js代码得节约你多少时间
Dec 20 #Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 #Javascript
非主流的textarea自增长实现js代码
Dec 20 #Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 #Javascript
js有关元素内容操作小结
Dec 20 #Javascript
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python图像处理之反色实现方法
2015/05/30 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
业务部经理岗位职责
2014/01/04 职场文书
英语国培研修感言
2014/02/13 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
秦兵马俑导游词
2015/02/02 职场文书
学生会个人总结范文
2015/02/15 职场文书
营运督导岗位职责
2015/04/10 职场文书
看雷锋电影观后感
2015/06/10 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript