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 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
jquery预加载图片的方法
May 27 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
Angular实现form自动布局
Jan 28 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
js实现移动端图片滑块验证功能
Sep 29 Javascript
用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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python3.6的venv模块使用详解
2018/08/01 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
课程设计心得体会
2013/12/28 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
经销商订货会主持词
2014/03/27 职场文书
地震捐款倡议书
2014/08/29 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server