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

来源：互联网发布：淘宝上的华佗药房编辑：程序博客网时间：2024/05/19 20:23

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>

1 0