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代码风格指南》，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现banner图轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
JS 页面内容搜索，类似于 Ctrl+F功能的实现代码...2007-08-08
这篇文章主要介绍了ES6新增的数组知识,结合实例形式分析了ES6的数组新增知识点、使用技巧与相关注意事项,需要的朋友可以参考下2020-05-05
JavaScript检测字符串中是否含有html标签实现方法
这篇文章主要介绍了JavaScript检测字符串中是否含有html标签实现方法,本文直接给出实现代码,需要的朋友可以参考下2015-07-07
JavaScript面试Module Federation实现原理详解
这篇文章主要为大家介绍了JavaScript面试Module Federation实现原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在浏览器地址栏输入这一行代码，然后回车，就发现整个页面都可以随意编辑了。仅仅是一行很短的代码。2008-07-07
这篇文章主要介绍了JavaScript动态修改网页元素内容的方法,实例分析了javascript操作html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了js实现网页同时进行多个倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
js自执行函数的几种不同写法的比较,需要的朋友可以参考下2012-08-08
这篇文章主要介绍了javascript头像上传代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
最新评论