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

就這么簡單，但是我們想要點擊空白部分的時候隱藏模態框，加入按鈕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");
}
});