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

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

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


<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>

你可能感兴趣的:(JavaScript[0])