您的位置：首页 > Web前端 > JavaScript

js实现的点击div区域外隐藏div区域

2016-11-03 17:59 645 查看
js实现的点击div区域外隐藏div区域

在写日历插件的时候，我需要点击日历以外的地方将日历隐藏，网上有很多种方法，我觉阻止事件冒泡这个方法比较简单，基本原理是利用js事件向上冒泡，在document上添加一个使目标div消失的方法，当点击其他区域时目标div消失，当点击目标div时阻止事件向上传播

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>js实现的点击div区域外隐藏div区域</title>
<style type="text/css">
#myDiv{
border:1px solid #000000;
width:200px;
height:100px;
background:#FF0000;
color: #FFFFFF;
margin: 50px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var myDiv = document.getElementById("myDiv");
document.addEventListener("click",function(){
myDiv.style.display="none";
});
myDiv.addEventListener("click",function(event){
event=event||window.event;
event.stopPropagation();
});
};
</script>
</head>
<body>
<div id="myDiv">隐藏的层</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航