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 tools 系列 scrollable学习
Sep 06 Javascript
jquery 经典动画菜单效果代码
Jan 26 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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
基于mysql的bbs设计(五)
2006/10/09 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python中lambda()的用法
2017/11/16 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
使用python制作一个解压缩软件
2019/11/13 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
jupyter notebook清除输出方式
2020/04/10 Python
python爬虫请求头设置代码
2020/07/28 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
某公司的.net工程师面试题笔试题
2013/11/22 面试题
工商技校毕业生自荐信
2013/11/15 职场文书
一年级家长会邀请函
2014/01/25 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
银行授权委托书范本
2014/10/04 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android