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 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
springboot+VUE实现登录注册
May 27 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
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php实现留言板功能
2017/03/05 PHP
PHP分享图片的生成方法
2018/04/25 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
pyramid配置session的方法教程
2013/11/27 Python
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
机器学习python实战之决策树
2017/11/01 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python实现多属性排序的方法
2018/12/05 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python中sys模块是做什么用的
2020/08/16 Python
django使用channels实现通信的示例
2020/10/19 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
安全生产月活动总结
2014/05/04 职场文书
2014年党课学习材料
2014/05/11 职场文书
就业协议书
2014/09/12 职场文书
七一慰问简报
2015/07/20 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书