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蒙版控件实现代码
Dec 08 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
javascript数组排序汇总
Jul 07 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
popdiv
2006/07/14 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
资料员的岗位职责
2013/11/20 职场文书
校友会欢迎辞
2014/01/13 职场文书
2014年科技工作总结
2014/11/26 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
Python实现天气查询软件
2021/06/07 Python