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的extend和fn.extend的使用说明
Jan 09 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
基于Vue实现拖拽功能
Jul 29 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
JS实现4位随机验证码
Oct 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
php执行sql语句的写法
2009/03/10 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
php实现的操作excel类详解
2016/01/15 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python logging添加filter教程
2019/12/24 Python
NumPy排序的实现
2020/01/21 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
弄虚作假心得体会
2014/09/10 职场文书
创优争先心得体会
2014/09/11 职场文书
银行贷款委托书范本
2014/10/11 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
公司开除员工通知
2015/04/22 职场文书
暂停营业通知
2015/04/25 职场文书
关于观后感的作文
2015/06/18 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
责任书格式
2019/04/18 职场文书