相信大家或多或少都會見到這樣的需求:
如圖所示，點擊按鈕彈出下面的彈出框，點擊空白處或者關閉按鈕彈出框就會關閉，但同時點擊彈出框的里面的其他部分，不會使彈出框關閉。
好，我們按步驟來一步步實現(xiàn)，這里引入jQuery方便DOM操作。
1、實現(xiàn)點擊按鈕彈框彈出
這個很容易辦到，就不多廢話了，直接上代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<title>document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#pop_box {
border: 1px solid #000;
background-color: #bce;
width: 300px;
height: 300px;
}
#pop_box.hide {
display: none;
}
#btn_close{
background: #71d7d0;
border-radius: 5px;
display: block;
padding: 10px;
width: 100px;
margin: 0 auto;
color: #fff;
}
</style>
</head>
<body>
<button type="" id="btn_open">點我彈出</button>
<div id="pop_box" class="hide">
<p>我是一個彈出框</p>
<button>一個無聊的按鈕</button><br><br>
<br>
<br>
<br>
<br>
<br>
<a id="btn_close" href="javascript:;">
<span>關閉彈出框</span>
</a>
</div>
<script src="jquery-3.2.0.js"></script>
<script>
$('#btn_open').click((e) => {
$('#pop_box').removeClass('hide')
e.stopPropagation()
})
</script>
</body>
</html>
2、實現(xiàn)點擊空白處彈框隱藏
這個時候，問題就來了，一般的思路肯定是給document綁定一個點擊事件，然后傳入event參數(shù)，判斷event.target的元素是不是彈出框里面的元素。但是很明顯，彈出框里面包含的可不是一個元素，彈出框里面包含了多個子元素，用普通的直接判定event.target的方式肯定是不行的了。
那么怎么辦呢，接下來就要介紹兩個jQuery庫里非常好用的函數(shù)了
一、 .is() 函數(shù)。它的用法總共有四種，這里就不一一介紹了，只介紹現(xiàn)在用到的一種:
.is(jQuery Object)
它傳入的是一個jQuery對象，返回的是一個布爾值，用以判斷當前對象與參數(shù)里的jQuery對象是否是同一個對象。
二、.has()函數(shù)。如果說.is()函數(shù)的作用一般般的話，那么這個.has()函數(shù)就厲害了。它的厲害之處就是可以方便的檢查一個元素是否在另一個元素之內(nèi)：
.has(jQuery Object)
需要注意的是，傳入的參數(shù)是父元素，前面的對象是子元素。它返回的是一個包含jQuery對象的類數(shù)組對象，具有l(wèi)ength屬性，我們剛好可以利用這個length屬性。當當前對象不屬于傳入的對象的時候，這個length就為0。
那么，利用這兩個jquery函數(shù)，我們的代碼就可以這么寫：
$(document).click((e) => {
var box = $('#pop_box'),
btn_close = $('#btn_close')
e.stopPropagation
console.log(box.has(e.target).length)
if (!box.is(e.target) && box.has(e.target).length == 0) {
$('#pop_box').addClass('hide')
}
})
這樣，就可以實現(xiàn)點擊空白處彈出框隱藏的功能了。
最后，將上面代碼改進，實現(xiàn)點擊隱藏按鈕，也能隱藏彈出框的功能:
$(document).click((e) => {
var box = $('#pop_box'),
btn_close = $('#btn_close')
e.stopPropagation
console.log(box.has(e.target).length)
if (!box.is(e.target) && box.has(e.target).length == 0 || btn_close.is(e.target) || btn_close.has(e.target).length > 0) {
$('#pop_box').addClass('hide')
}
})
這樣，一個基本的彈出框的功能就大功告成了，下面貼出所有代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<title>document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#pop_box {
border: 1px solid #000;
background-color: #bce;
width: 300px;
height: 300px;
}
#pop_box.hide {
display: none;
}
#btn_close{
background: #71d7d0;
border-radius: 5px;
display: block;
padding: 10px;
width: 100px;
margin: 0 auto;
color: #fff;
}
</style>
</head>
<body>
<button type="" id="btn_open">點我彈出</button>
<div id="pop_box" class="hide">
<p>我是一個彈出框</p>
<button>一個無聊的按鈕</button><br><br>
<br>
<br>
<br>
<br>
<br>
<a id="btn_close" href="javascript:;">
<span>關閉彈出框</span>
</a>
</div>
<script src="jquery-3.2.0.js"></script>
<script>
$('#btn_open').click((e) => {
$('#pop_box').removeClass('hide')
e.stopPropagation()
})
$(document).click((e) => {
var box = $('#pop_box'),
btn_close = $('#btn_close')
e.stopPropagation
console.log(box.has(e.target).length)
if (!box.is(e.target) && box.has(e.target).length == 0 || btn_close.is(e.target) || btn_close.has(e.target).length > 0) {
$('#pop_box').addClass('hide')
}
})
</script>
</body>
</html>
如果大家有更好的方法實現(xiàn)此功能，請不吝賜教在評論區(qū)留言！
