js利用事件的阻止冒泡實(shí)現(xiàn)點(diǎn)擊空白模態(tài)框的隱藏
更新時間：2014年01月24日 15:00:33 作者：
點(diǎn)擊彈出某個框框，但是，有時候不想操作，就想點(diǎn)擊某個空白處，隱藏該框框，關(guān)于這一點(diǎn)，下面有個具體的實(shí)現(xiàn)
很多時候，我們做前端的時候都會有這樣的小功能，點(diǎn)擊彈出某個框框，但是，有時候不想操作，就想點(diǎn)擊某個空白處，隱藏該框框。假設(shè)如下場景，一個小按鈕，點(diǎn)擊可以彈出一個模態(tài)框。
就這么簡單，但是我們想要點(diǎn)擊空白部分的時候隱藏模態(tài)框，加入按鈕id：btn，模態(tài)框id：model
也許我們最簡單的思路就是直接在document上監(jiān)聽一個事件，偽代碼如下：
按鈕點(diǎn)擊彈出事件監(jiān)聽：
$("#btn").bind("click",function(e){
if(e.stopPropagation){//需要阻止冒泡
e.stopPropagation();
}else{
e.cancelBubble = true;
}
})
$(document).bind("click",function(e){
if(點(diǎn)擊事件不在model上){
隱藏模態(tài)框;
}
})
乍一看，這是沒有問題的，但是，其實(shí)有很多問題，首先，我們得注意阻止冒泡，否則，點(diǎn)擊按鈕，實(shí)際是觸發(fā)了上面兩個事件，modal是彈不出來的，其實(shí)是彈出來了，立馬又隱藏了，而且，當(dāng)我們在模態(tài)框上還有許多小控件的時候，我們對于模態(tài)框中的點(diǎn)擊就很難進(jìn)行判斷。
這里，我認(rèn)為有一種最經(jīng)典的方法，很簡單，但是很巧妙，
首先，對于模態(tài)框監(jiān)聽一個事件如下：
$("#modal").bind("click", function(event) {
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
});
只是簡單阻止模態(tài)框中的點(diǎn)擊事件冒泡，
然后：
$(document).one("click", function(e){
var $target = $(e.currentTarget);
if ($target.attr("id") != "modal") {
$("#modal").css("display", "none");
}
});
搞定，so easy
就這么簡單，但是我們想要點(diǎn)擊空白部分的時候隱藏模態(tài)框，加入按鈕id：btn，模態(tài)框id：model
也許我們最簡單的思路就是直接在document上監(jiān)聽一個事件，偽代碼如下：
按鈕點(diǎn)擊彈出事件監(jiān)聽：
復(fù)制代碼 代碼如下:
$("#btn").bind("click",function(e){
if(e.stopPropagation){//需要阻止冒泡
e.stopPropagation();
}else{
e.cancelBubble = true;
}
})
復(fù)制代碼 代碼如下:
$(document).bind("click",function(e){
if(點(diǎn)擊事件不在model上){
隱藏模態(tài)框;
}
})
乍一看，這是沒有問題的，但是，其實(shí)有很多問題，首先，我們得注意阻止冒泡，否則，點(diǎn)擊按鈕，實(shí)際是觸發(fā)了上面兩個事件，modal是彈不出來的，其實(shí)是彈出來了，立馬又隱藏了，而且，當(dāng)我們在模態(tài)框上還有許多小控件的時候，我們對于模態(tài)框中的點(diǎn)擊就很難進(jìn)行判斷。
這里，我認(rèn)為有一種最經(jīng)典的方法，很簡單，但是很巧妙，
首先，對于模態(tài)框監(jiān)聽一個事件如下：
復(fù)制代碼 代碼如下:
$("#modal").bind("click", function(event) {
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
});
只是簡單阻止模態(tài)框中的點(diǎn)擊事件冒泡，
然后：
復(fù)制代碼 代碼如下:
$(document).one("click", function(e){
var $target = $(e.currentTarget);
if ($target.attr("id") != "modal") {
$("#modal").css("display", "none");
}
});
搞定，so easy
您可能感興趣的文章:
- AngularJs 彈出模態(tài)框（model）
- JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果
- js實(shí)現(xiàn)簡單模態(tài)框?qū)嵗?/a>
- Vue.js彈出模態(tài)框組件開發(fā)的示例代碼
- angularJS模態(tài)框$modal實(shí)例代碼
- AngularJS中使用ngModal模態(tài)框?qū)嵗?/a>
- bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能
- AngularJS模態(tài)框模板ngDialog的使用詳解
- 原生js實(shí)現(xiàn)簡單的模態(tài)框示例
- JavaScript+CSS實(shí)現(xiàn)模態(tài)框效果
相關(guān)文章
這篇文章全面解析了Bootstrap排版使用方法，本文重點(diǎn)介紹Bootstrap標(biāo)題排版，感興趣的小伙伴們可以參考一下2015-11-11
JS在onclientclick里如何控制onclick的執(zhí)行
這篇文章主要介紹了JS在onclientclick里如何控制onclick的執(zhí)行的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章給大家介紹了js中的對象和原型，從工廠模式，構(gòu)造函數(shù)方面展開話題，介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
js實(shí)現(xiàn)完美兼容各大瀏覽器的人民幣大小寫相互轉(zhuǎn)換
在基于網(wǎng)頁的打印輸出或報表中，經(jīng)常會牽扯到金額的大寫，每次都打上去很麻煩，所以想法用一個JavaScript客戶端腳本來實(shí)現(xiàn)自動轉(zhuǎn)換，只需在需要顯示大寫金額的時候調(diào)用該JS函數(shù)，下面我們就來匯總下吧2015-10-10
ECharts餅圖顏色設(shè)置的4種方式總結(jié)
這篇文章主要給大家介紹了關(guān)于ECharts餅圖顏色設(shè)置的4種方式,ECharts餅圖的顏色可以通過多種方式進(jìn)行設(shè)置,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)長圖上下滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript對Cookie進(jìn)行讀寫操作實(shí)例
這篇文章主要介紹了JavaScript對Cookie進(jìn)行讀寫操作的方法,實(shí)例分析了javascript針對cookie的讀寫操作技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序底部彈出框封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在JavaScript中使用嚴(yán)格模式(Strict Mode)
這篇文章主要介紹了在JavaScript中使用嚴(yán)格模式(Strict Mode),除了正常運(yùn)行模式，ECMAscript 5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。,需要的朋友可以參考下2019-06-06
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ES6
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ECMAScript 6，ES6（ECMAScript 6）是即將到來的新版本JavaScript語言的標(biāo)準(zhǔn)，代號harmony，感興趣的小伙伴們可以參考一下2015-11-11