滑鼠點選頁面的其它地方div自動隱藏
阿新 • • 發佈：2019-02-10
（一）加入關閉按鈕只要再加一個onclick 時間就行了，turnoff（‘ ’）裡的引數可以改變。程式碼如下
<html> <meta charset="gbk"> <head> <script> var hide=function() { var divs=document.getElementsByTagName("div"); for (var i=0;i<divs.length ;i++ ) { divs[i].style.display="none"; } } window.onload=function(){ hide(); var a=document.getElementsByTagName("td"); for(var i = 0; i < a.length; i++) { a[i].onclick = function(oEvent) { oEvent = oEvent || event;hide(); document.getElementById("div"+this.id).style.display="block"; } } } // 加入關閉操作的函式 function turnoff(obj){ document.getElementById(obj).style.display="none"; } </script> </head> <body> <table > <tr> <td id="1"> <a href="#">彈出層1</a> </td> <td id="2"> <a href="#">彈出層2</a> </td> <td id="3"> <a href="#">彈出層3</a> </td> </tr> </table> <div id="div1" style="background:#0F0; width:200px; height:100px;"> <p>層1 </p><a href="#" onclick="turnoff('div1')">點選關閉</a> </div> <div id="div2" style="background:#00F;width:200px; height:100px;"> <p>層2 </p><a href="#" onclick="turnoff('div2')">點選關閉</a> </div> <div id="div3" style="background:#F00;width:200px; height:100px;"> <p>層3 </p><a href="#" onclick="turnoff('div3')">點選關閉</a> </div> </body> </html>
（二）點選div之外的地方隱藏div，方法多種，但都是通過 js操作到事件源，判斷這個事件源的ID是不是在要隱藏的div 即點選事件發生的範圍是否在div之外，但前提是事件不能和你前面寫的js事件發生衝突。 註冊一個document.onclick或者document.onmousedown事件來監控滑鼠點選div以外的區域時事件，你給這個div的id屬性賦一個頁面唯一的值比如<div id="tAnChu" />
程式碼如下：
上個單一div事例：document.onclick = function (event) { var e = event || window.event; var elem = e.srcElement||e.target; while(elem) { if(elem.id == "tAnChu") { return; } elem = elem.parentNode; } //隱藏div的方法 HiddenDiv(); }
<html> <head> <script type='text/javascript'> window.onload = function(){ document.onclick = function(e){ e = e || window.event; var dom = e.srcElement|| e.target; if(dom.id !="tAnChu" && document.getElementById("tAnChu").style.display == "block") { document.getElementById("tAnChu").style.display = "none"; } }; }; function openTanChu(e) { document.getElementById("tAnChu").style.display = "block"; e = e||window.event; if(+'\v1') { e.stopPropagation(); } else { e.cancelBubble = true; } } </script> <style> #tAnChu{ position:fixed; left:40%; top:100px; background-color:#ccc; width:200px; height:120px; display:none; } </style> </head> <body> <input type="button" value="開啟" onclick="openTanChu(event)" /> <div id="tAnChu"> 這是彈出層 </div> </body>