1 遮罩層，有一個遮罩層，蓋住其他地方，然後只有目標div可以點擊，點擊遮罩層就可以隱藏；
2.body上綁定事件，關閉，組件銷燬前把事件移除。
<div id="badge" @click="handleClick($event)">設置備註及標籤</div>
methods: {
handleBodyClick(){
// 關閉
// dom爲上面的目標·div區域
let dom = document.getElementById('badge')
if (dom) {
if (!dom.contains(e.target)) {
this.messageShow = false
}
}
}
},
mounted(){
this.$nextTick(() => {
document.querySelector('body').addEventListener('click', this.handleBodyClick);
})
},
beforeDestroy(){
document.querySelector('body').removeEventListener('click', this.handleBodyClick);
}
3.監聽事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>js實現的點擊div區域外隱藏div區域</title>
<style type="text/css">
#myDiv{
border:1px solid #000000;
width:200px;
height:100px;
background:#FF0000;
}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
<script type="text/javascript">
console.log('1111111111')
var myDiv = document.getElementById("myDiv");
document.addEventListener("click",function(){
console.log('5555')
myDiv.style.display="none";
});
myDiv.addEventListener("click",function(badge){
console.log('6666', badge)
event=event||window.event;
event.stopPropagation();
});
</script>
</html>