js利用事件的阻止冒泡實現點擊空白模態框的隱藏

 點擊彈出某個框框，但是，有時候不想操作，就想點擊某個空白處，隱藏該框框，關於這一點，下面有個具體的實現

很多時候，我們做前端的時候都會有這樣的小功能，點擊彈出某個框框，但是，有時候不想操作，就想點擊某個空白處，隱藏該框框。假設如下場景，一個小按鈕，點擊可以彈出一個模態框。    就這麼簡單，但是我們想要點擊空白部分的時候隱藏模態框，加入按鈕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是彈不出來的，其實是彈出來了，立馬又隱藏了，而且，當我們在模態框上還有許多小控件的時候，我們對於模態框中的點擊就很難進行判斷。    這裡，我認為有一種最經典的方法，很簡單，但是很巧妙，    首先，對於模態框監聽一個事件如下：  代碼如下: $("#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");  }  });    搞定，so easy