js利用事件的阻止冒泡實現(xiàn)點擊空白模態(tài)框的隱藏

更新時間：2014年01月24日 15:00:33 作者：

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

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

就這么簡單，但是我們想要點擊空白部分的時候隱藏模態(tài)框，加入按鈕id：btn，模態(tài)框id：model

也許我們最簡單的思路就是直接在document上監(jiān)聽一個事件，偽代碼如下：

按鈕點擊彈出事件監(jiān)聽：

復制代碼代碼如下:

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

復制代碼代碼如下:

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

乍一看，這是沒有問題的，但是，其實有很多問題，首先，我們得注意阻止冒泡，否則，點擊按鈕，實際是觸發(fā)了上面兩個事件，modal是彈不出來的，其實是彈出來了，立馬又隱藏了，而且，當我們在模態(tài)框上還有許多小控件的時候，我們對于模態(tài)框中的點擊就很難進行判斷。

這里，我認為有一種最經(jīng)典的方法，很簡單，但是很巧妙，

首先，對于模態(tài)框監(jiān)聽一個事件如下：

復制代碼代碼如下:

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

}); 

只是簡單阻止模態(tài)框中的點擊事件冒泡，

然后：

復制代碼代碼如下:

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

搞定，so easy

您可能感興趣的文章:

全面解析Bootstrap排版使用方法（標題）
這篇文章全面解析了Bootstrap排版使用方法，本文重點介紹Bootstrap標題排版，感興趣的小伙伴們可以參考一下
2015-11-11
JS在onclientclick里如何控制onclick的執(zhí)行
這篇文章主要介紹了JS在onclientclick里如何控制onclick的執(zhí)行的相關資料,需要的朋友可以參考下
2016-05-05
Javascript中的對象和原型(二)
這篇文章給大家介紹了js中的對象和原型，從工廠模式，構造函數(shù)方面展開話題，介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2016-08-08
js實現(xiàn)完美兼容各大瀏覽器的人民幣大小寫相互轉換
在基于網(wǎng)頁的打印輸出或報表中，經(jīng)常會牽扯到金額的大寫，每次都打上去很麻煩，所以想法用一個JavaScript客戶端腳本來實現(xiàn)自動轉換，只需在需要顯示大寫金額的時候調(diào)用該JS函數(shù)，下面我們就來匯總下吧
2015-10-10
ECharts餅圖顏色設置的4種方式總結
這篇文章主要給大家介紹了關于ECharts餅圖顏色設置的4種方式,ECharts餅圖的顏色可以通過多種方式進行設置,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-09-09
JS實現(xiàn)長圖上下滾動效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)長圖上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
JavaScript對Cookie進行讀寫操作實例
這篇文章主要介紹了JavaScript對Cookie進行讀寫操作的方法,實例分析了javascript針對cookie的讀寫操作技巧,非常簡單實用,需要的朋友可以參考下
2015-07-07
微信小程序?qū)崿F(xiàn)底部彈出框封裝
這篇文章主要為大家詳細介紹了微信小程序底部彈出框封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
在JavaScript中使用嚴格模式(Strict Mode)
這篇文章主要介紹了在JavaScript中使用嚴格模式(Strict Mode),除了正常運行模式，ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。,需要的朋友可以參考下
2019-06-06
跟我學習javascript的最新標準ES6
跟我學習javascript的最新標準ECMAScript 6，ES6（ECMAScript 6）是即將到來的新版本JavaScript語言的標準，代號harmony，感興趣的小伙伴們可以參考一下
2015-11-11