js实现模态框点击空白关闭

面试的时候被问到了，这个问题我在网上一直没搜索到。不过bootstrap已经实现了。
在学习js事件委托的时候。想到可以解决这个问题。
在document添加点击监听，利用事件的捕获和冒泡，界面上的点击事件最终都会响应到document上，通过event e的target属性来判断是否点击的是模态框，如果不是的话就隐藏。

  <script>
    let modal = document.getElementsByClassName('modal')[0]
    document.addEventListener('click', function(e) {
    
    
      if (e.target === modal) {
    
    
        log('模态框被点击了哦')
      } else {
    
    
        modal.style.display = 'none'
      }
    })
  </script>