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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
jQuery实现飞机大战小游戏
Jul 05 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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
vue中如何使用ztree
2018/02/06 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
python实现网站微信登录的示例代码
2019/09/18 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
如何将字串String转换成整数int
2015/02/21 面试题
聚网科技C++面试笔试题
2015/09/01 面试题
二手书店创业计划书
2014/01/16 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
财务人员担保书
2014/05/13 职场文书
无私奉献演讲稿
2014/09/04 职场文书
计划生育工作汇报
2014/10/28 职场文书
大学生自荐信范文
2015/03/05 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
在Python 中将类对象序列化为JSON
2022/04/06 Python