Javascript点击其他任意地方隐藏关闭DIV实例
更新时间：2016年06月21日 15:03:43 作者：沫鱼
这篇文章主要分享一个Javascript点击其他任意地方隐藏关闭DIV实例,需要的朋友可以参考下。
代码如下，实现了点击input显示一个div层，当点击除input和div以外的地方的时候，隐藏div的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点击其它地方关闭DIV</title>
</head>
<body>
<input type="text" value="" id="tf"/>
<div style="width:400px; height:200px;border:1px solid #000;display:none" id="con">
<p>1111</p>
<p><span>2222</span></p>
<p><a href="#">3333</a></p>
</div>
<script>
function e(obj){return document.getElementById(obj)}
e('tf').onclick=function(event){
e('con').style.display='block';
stopBubble(event);
document.onclick=function(){
e('con').style.display='none';
document.onclick=null;
}
}
e('con').onclick=function(event){
//只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数
stopBubble(event);
}
//阻止冒泡函数
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation(); //w3c
}else{
window.event.cancelBubble=true; //IE
}
}
</script>
</body>
</html>
以上就是本文的全部内容，了解更多JavaScript的语法，大家可以查看：《JavaScript 参考教程》、《JavaScript代码风格指南》，也希望大家多多支持脚本之家。
相关文章
cookie丢失问题(认证失效) Authentication （用户验证信息）也会丢失
window.showModalDialog() 后 window.open() 导致cookie丢失问题(认证失效) Authentication （用户验证信息）也会丢失2009-06-06
这篇文章主要介绍了JavaScript获取中英文混合字符串长度的方法,结合实例形式分析了javascript通过遍历转换字符串实现统计字符串长度的操作技巧,需要的朋友可以参考下2017-02-02
在很多时候我们都需要将数据转换为JSON的格式去进行请求,下面这篇文章主要给大家介绍了关于js字符串转json的三种简单方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了详解用Webpack与Babel配置ES6开发环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了理解javascript中的回调函数(callback),本文着重于对回调函数概念的理解,需要的朋友可以参考下2014-09-09
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
这篇文章主要介绍了javascript字符串对象常用api函数,结合实例形式总结分析了javascript常用的连接、替换、分割、转换等相关函数与使用方法,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了仅一个form表单，JavaScript可实现注册信息依次填写提交功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性，通过本文给大家介绍JavaScript图像延迟加载库Echo.js ，感兴趣的朋友一起学习吧2016-04-04
这篇文章主要为大家介绍了如何使用JavaScript实现读取Excel文件内容并生成二维码下载到本地，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-04-04
这篇文章主要介绍了JavaScript实现提交模式窗口后刷新父窗口数据的方法,涉及javascript窗口交互的相关操作技巧,需要的朋友可以参考下2017-06-06
最新评论