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 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
小程序实现搜索框功能
Mar 26 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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
php session 错误
2009/05/21 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
newxtree.js代码
2007/03/13 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
ES6之模版字符串的具体使用
2018/05/17 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
详细探究Python中的字典容器
2015/04/14 Python
Python中的下划线详解
2015/06/24 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
总经理岗位职责描述
2014/02/08 职场文书
计算机系本科生求职信
2014/05/31 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
小学生教师节广播稿
2015/08/19 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS