js点击某个元素控制div显示，点击除div区域外任意处div隐藏

最新推荐文章于 2023-05-04 10:58:16 发布

原创最新推荐文章于 2023-05-04 10:58:16 发布 · 1.5w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript学习笔记专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript实现点击特定元素（如'a'标签）显示div和input，同时当点击div区域外的地方时自动隐藏div。示例代码展示了具体的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js点击元素a（或其他元素）控制div、 input显示，点击div区域外任意处div隐藏

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0}
a{ display: inline-block; width: 50px;height: 50px;background: #f40;margin: 50px 0 0 50px;}
div{margin: 60px 0 0 50px; padding: 20px;outline: none;border:1px solid #eee;border-radius: 5px;width: 200px;}
</style>
</head>
<body>
<a id="search"></a>
<div id="searchBox"></div>
<script type="text/javascript">
window.onload = function(){
var obj=document.getElementById("searchBox");
var oBtn=document.getElementById("search");
searchBox.style.display = "none";
oBtn.onclick=function(){
obj.style.display="block";
}
document.onclick=function(event){
//
var e=event || window.event;//兼容ie和非ie的event
var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
//
if(e.srcElement){
var aim=e.srcElement;
if(aim!=oBtn && aim!=obj){
obj.style.display="none";
}
}else{
var aim=e.target;
if(aim!=oBtn && aim!=obj){
obj.style.display="none";
}
}
}
}
</script>
</body>
</html>