如何实现点击div区域外隐藏div区域
生活随笔
收集整理的這篇文章主要介紹了
如何实现点击div区域外隐藏div区域
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1 遮罩層，有一個遮罩層，蓋住其他地方，然后只有目標(biāo)div可以點(diǎn)擊，點(diǎn)擊遮罩層就可以隱藏；
2.body上綁定事件，關(guān)閉，組件銷毀前把事件移除。
<div id="badge" @click="handleClick($event)">設(shè)置備注及標(biāo)簽</div> methods: {handleBodyClick(){// 關(guān)閉// dom為上面的目標(biāo)·div區(qū)域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.監(jiān)聽事件
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>js實(shí)現(xiàn)的點(diǎn)擊div區(qū)域外隱藏div區(qū)域</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>總結(jié)
以上是生活随笔為你收集整理的如何实现点击div区域外隐藏div区域的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入浅出FPGA-18-VPI
- 下一篇： 记账APP、家庭记账、分享下自己以前做的