如何实现点击div区域外隐藏div区域
生活随笔
收集整理的這篇文章主要介紹了
如何实现点击div区域外隐藏div区域
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>總結
以上是生活随笔為你收集整理的如何实现点击div区域外隐藏div区域的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入浅出FPGA-18-VPI
- 下一篇： 记账APP、家庭记账、分享下自己以前做的