給div設定display: none,然後通過button觸發display:block，在這裡需要進行一個阻止事件冒泡處理，通過e.stopPropagation()方法進行阻止冒泡到document上，再通過點選document事件源點選給div設定display: none。

        div{
            display: none;
            width: 300px;
            height: 300px;
            background-color: red;
        }

<button>點選</button>
 

  <div></div>
  <script>
      var btn=document.querySelector('button');
      var div=document.querySelector('div');
      btn.addEventListener('click',function (e) {
          div.style.display='block';
            e.stopPropagation();  //停止冒泡
      });
      document.addEventListener(
 
'click',function () {
          div.style.display='none';  //div 消失
      })
  </script>

供參考！！！