如何实现点击div区域外隐藏div区域

最新推荐文章于 2024-05-31 16:48:46 发布

flym_

最新推荐文章于 2024-05-31 16:48:46 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/u014689760/article/details/97740841

版权

方法专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

flym_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何实现点击div区域外隐藏div区域

1 遮罩层，有一个遮罩层，盖住其他地方，然后只有目标div可以点击，点击遮罩层就可以隐藏；2.body上绑定事件，关闭，组件销毁前把事件移除。<div id="badge" @click="handleClick($event)">设置备注及标签</div>methods: { handleBodyClick(){ // 关闭 // d...
复制链接

扫一扫