JavaScript--vue--点击空白区域关闭弹窗的几种方式

判断点击事件发生在某个区域外的条件：
1.点击事件的对象不是目标区域本身
2.事件对象同时也不是目标区域的子元素

1.jQuery方式

$(document).mouseup(function(e){
	var 自定义名字=$('目标对象') //设置目标区域
	if(!自定义名字.is(e.target)&&自定义名字.has(e.target).length===0){
		//执行关弹窗的代码
	}
})

2.JavaScript方式

var 自定义名字= document.getElementById('目标对象'); 

// 点击整个界面关闭弹窗 
document.onclick = function()  {
    div.style.display = "none";  
}  
   
// 阻止点击弹窗时关闭弹窗
自定义名字.onclick = function()  {
    return false;  
}

3.vue方式

document.addEventListener('mouseup',(e)=>{
	var 自定义名字=document.querySelector('目标对象') //选择返回的第一个出现的元素
	if(自定义名字){
		if(!自定义名字.contains(event.target)){ //判断某个元素不是目标元素的子元素 即目标元素以外的区域
			this.绑定的控制弹窗的属性=false
		}
	}	
})