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 相关文章推荐
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
详解puppeteer使用代理
Dec 27 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
JavaScript异步操作中串行和并行
Nov 20 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 什么是PEAR?(第二篇)
2009/03/19 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
php实现数据库的增删改查
2017/02/26 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
浅析Python中的for 循环
2016/06/09 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
keras导入weights方式
2020/06/12 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
大学生毕业自我鉴定范文
2013/11/03 职场文书
班组安全员工作职责
2014/02/01 职场文书
工程承诺书怎么写
2014/05/24 职场文书
2014年党建工作总结
2014/11/11 职场文书
干部年终考核评语
2015/01/04 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书