1原生方法
// html
<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 写法
//html
<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
3vue
给最外层的div加个点击事件 @click="userClick=false"
给点击的元素上面加上：@click.stop="userClick=!userClick" //vue click.stop阻止点击事件继续传播
或者给子元素js事件里
click(e)=>{
e.stopPropagation();//阻止事件冒泡
this.userClick = !this.userClick;
}