原生js实现点击目标区域外侧触发事件
有时候由于需要实现点击出现下拉框，而点击空白处或除了目标区域之外而响应事件使得弹框消失，此文则与各位分享如何使用原生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> 相关推荐
HSdiana 2020-05-11
haocxy 2020-03-08
opspider 2020-06-28
ZHANGRENXIANG00 2020-06-28
明瞳 2020-06-10
lanzhusiyu 2020-06-09
PengQ 2020-05-26
lengyu0 2020-05-20
haidaoxianzi 2020-04-18
PioneerFan 2020-04-09
HSdiana 2020-03-28
百年da孤独 2020-03-27
lwb 2020-03-26
spinachcqb 2020-03-06
柳永法的个人 2020-02-13
qsdnet我想学编程 2020-01-29
wwwxuewen 2020-01-19