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

2019-11-20 21:12:30

字體：大中小

來源：轉載

供稿：網友

很多時候，我們做前端的時候都會有這樣的小功能，點擊彈出某個框框，但是，有時候不想操作，就想點擊某個空白處，隱藏該框框。假設如下場景，一個小按鈕，點擊可以彈出一個模態(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)框中的點擊就很難進行判斷。

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

首先，對于模態(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

上一篇：js監(jiān)聽滾動條滾動事件使得某個標簽內容始終位于同一位置

下一篇：JS實現點擊鏈接取消跳轉效果的方法