html:

<div class="wrap">
        <div class="content">
        </div>
</div>

第一種思路：當前點選的物件不是對話方塊本身，則讓對話方塊消失

var wrap = document.getElementsByClassName('wrap')[0];
var content  = document.getElementsByClassName('content')[0];
    wrap.onclick = function(e){
        if(e.target !== content){
             wrap.style.display = 'none'
             console.log('點的對話方塊以外')
        }else{
             console.log('點選的對話方塊')
        } 
}
 

結果：

點選'對話方塊'：

點選'對話方塊'以外：

第二種思路：利用事件的target和currentTarget.

  if(e.target !== e.currentTarget){
       wrap.style.display = 'none';
       console.log('點的對話方塊以外')
  }else{
       console.log('點選的對話方塊')
  }

因為currentTaget表示你繫結事件的元素，是'對話方塊'以外的區域,而點選對話方塊，e.target為'對話方塊'本身，兩者不是同一個元素！