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;
}