有時候由於需要實現點擊出現下拉框,而點擊空白處或除了目標區域之外而響應事件使得彈框消失,此文則與各位分享如何使用原生js實現該需求
整個html文件獻上(已封裝)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
<script>
//封裝
function clickoutSide(nameClass,callback){
// 全局注冊點擊事件
document.onclick = function(e){
//若點擊元素為目標元素則返回
if(e.target.className===nameClass) return
//否則執行回調函數
callback()
}
}
clickoutSide('box',function(){
console.log('點擊了外部');
})
</script>
</html>