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 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 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 进度条实现代码
2009/03/10 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
jQuery 回车事件enter使用示例
2014/02/18 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
在Python中使用成员运算符的示例
2015/05/13 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
python调用java的jar包方法
2018/12/15 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
生物制药专业求职信
2014/03/11 职场文书
幼儿园开学寄语
2014/04/03 职场文书
个园导游词
2015/02/04 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis