实现点击页面其他地方，隐藏div（原生和VUE）

1原生方法

<div 
id="box" 
style="width:110px;height:110px;background-color:red"
></div>

//js------js的contains方法用来查看dom元素的包含关系，

document.addEventListener('click',(e)=>{
　　alert('zhixing')
　　var box = document.getElementById('box');
　　if(box.contains(e.target)){
　　　　alert('在内');
　　}else{
　　　　alert('在外'); 
　　}
})

2、 vue 写法

<div 
id="box" 
ref="box" 
style="width:110px;height:110px;background-color:red"
></div>

//js ----ref是vue获取DOM元素的方法，在标签上绑定ref属性，js在组件内部用this.$refs.ref的值，调用。

created(){
　　document.addEventListener('click',(e)=>{
　　　　console.log(this.$refs.box.contains(e.target));
　　　　if(!this.$refs.box.contains(e.target)){
　　　　　　this.isShowDialog = false;
　　　　}
　　})
}

原文：https://blog.csdn.net/cxz792116/article/details/79415544

3、Vue：给最外层的div加个点击事件 @click=“userClick=false”。给点击的元素上面加上：@click.stop=“userClick=!userClick” //vue click.stop阻止点击事件继续传播或者给子元素js事件里。

click(e)=>{
　　e.stopPropagation();//阻止事件冒泡
　　this.userClick = !this.userClick;
}