码迷,mamicode.com
首页 > Web开发 > 详细

原生js实现点击目标区域外侧触发事件

时间:2020-06-03 23:40:02      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:llb   init   响应   注册   OLE   name   需求   style   content   

有时候由于需要实现点击出现下拉框,而点击空白处或除了目标区域之外而响应事件使得弹框消失,此文则与各位分享如何使用原生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实现点击目标区域外侧触发事件

标签:llb   init   响应   注册   OLE   name   需求   style   content   

原文地址:https://www.cnblogs.com/axu1997/p/13040604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!