原生js实现点击目标区域外侧触发事件
Posted WindEyes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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>
以上是关于原生js实现点击目标区域外侧触发事件的主要内容，如果未能解决你的问题，请参考以下文章