很多時候，我們做前端的時候都會有這樣的小功能，點選彈出某個框框，但是，有時候不想操作，就想點選某個空白處，隱藏該框框。假設如下場景，一個小按鈕，點選可以彈出一個模態框。

就這麼簡單，但是我們想要點選空白部分的時候隱藏模態框，加入按鈕id：btn，模態框id：model

也許我們最簡單的思路就是直接在document上監聽一個事件，虛擬碼如下：

按鈕點選彈出事件監聽：

$("#btn").bind("click",function(e){
    if(e.stopPropagation){//需要阻止冒泡
     e.stopPropagation();
  }else{
     e.cancelBubble = true;
  }
})
 

$(document).bind("click",function(e){
        if(點選事件不在model上){
		隱藏模態框;     
      }
})

這裡，我認為有一種最經典的方法，很簡單，但是很巧妙，

首先，對於模態框監聽一個事件如下：

$("#modal").bind("click", function(event) {
                if (event && event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
                
            });
 

只是簡單阻止模態框中的點選事件冒泡，

然後：

$(document).one("click", function(e){
var $target = $(e.currentTarget);
            if ($target.attr("id") != "modal") {
                $("#modal").css("display", "none");
            }
});