点击其他地方div消失

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

郭玉齐

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

阅读量1.4k

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/qq706352062/article/details/86007572

版权

笔记专栏收录该内容

113 篇文章 1 订阅

订阅专栏

点击其他地方div消失

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>点击其他地方div消失</title>
  <style>
      #b{
          width:300px;
          height:300px;
          border:1px solid black;
          display:none
      }
  </style>
</head>

<body>
    <button id="a">aaa</button>
       
    <div style="" id="b">
        <p>看什么看</p>
        <p>看什么看</p>
    </div>
    <script>
  function e(obj){
    return document.getElementById(obj)
  }
  e('a').onclick = function (event) {
      e('b').style.display = 'block';
    stopBubble(event);
    document.onclick=function(){
        e('b').style.display = 'none';
　　　document.onclick=null;　
    }
  }

  e('b').onclick = function (event) {
    stopBubble(event);
  }
  
  function stopBubble(e){
    if(e && e.stopPropagation){
      e.stopPropagation();  
    }else{
      window.event.cancelBubble=true; 
    }
  }
    </script>
</body>
</html>