欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2014年01月24日 15:00:33   作者：  
點(diǎn)擊彈出某個(gè)框框，但是，有時(shí)候不想操作，就想點(diǎn)擊某個(gè)空白處，隱藏該框框，關(guān)于這一點(diǎn)，下面有個(gè)具體的實(shí)現(xiàn)
很多時(shí)候，我們做前端的時(shí)候都會(huì)有這樣的小功能，點(diǎn)擊彈出某個(gè)框框，但是，有時(shí)候不想操作，就想點(diǎn)擊某個(gè)空白處，隱藏該框框。假設(shè)如下場(chǎng)景，一個(gè)小按鈕，點(diǎn)擊可以彈出一個(gè)模態(tài)框。

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

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

按鈕點(diǎn)擊彈出事件監(jiān)聽(tīng)：
復(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)框;
}
})

乍一看，這是沒(méi)有問(wèn)題的，但是，其實(shí)有很多問(wèn)題，首先，我們得注意阻止冒泡，否則，點(diǎn)擊按鈕，實(shí)際是觸發(fā)了上面兩個(gè)事件，modal是彈不出來(lái)的，其實(shí)是彈出來(lái)了，立馬又隱藏了，而且，當(dāng)我們?cè)谀B(tài)框上還有許多小控件的時(shí)候，我們對(duì)于模態(tài)框中的點(diǎn)擊就很難進(jìn)行判斷。

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

首先，對(duì)于模態(tài)框監(jiān)聽(tīng)一個(gè)事件如下：
復(fù)制代碼 代碼如下:

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

});

只是簡(jiǎn)單阻止模態(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

相關(guān)文章

最新評(píng)論