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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php下获取http状态的实现代码
2014/05/09 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python动态进度条的实现代码
2019/07/03 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
营销与策划个人求职信
2013/09/22 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
车间班组长竞聘书
2015/09/15 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
golang语言指针操作
2022/04/14 Golang
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js