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扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
vue组件学习教程
Sep 09 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
用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
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
JavaScript入门基础
2015/08/12 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
商超业务员岗位职责
2014/03/12 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
世界读书日的活动方案
2014/08/20 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
网络营销计划书
2015/01/17 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
2019年大学推荐信
2019/06/24 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server