代碼如下,實現了點擊input顯示一個div層,當點擊除input和div以外的地方的時候,隱藏div的功能。
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>點擊其它地方關閉DIV</title></head><body><input type="text" value="" id="tf"/><div style="width:400px; height:200px;border:1px solid #000;display:none" id="con"> <p>1111</p> <p><span>2222</span></p> <p><a href="#">3333</a></p></div><script> function e(obj){return document.getElementById(obj)} e('tf').onclick=function(event){ e('con').style.display='block'; stopBubble(event); document.onclick=function(){ e('con').style.display='none'; document.onclick=null; } } e('con').onclick=function(event){ //只阻止了向上冒泡,而沒有阻止向下捕獲,所以點擊con的內部對象時,仍然可以執行這個函數 stopBubble(event); } //阻止冒泡函數 function stopBubble(e){ if(e && e.stopPropagation){ e.stopPropagation(); //w3c }else{ window.event.cancelBubble=true; //IE } }</script></body></html>以上就是本文的全部內容,了解更多JavaScript的語法,大家可以查看:《JavaScript 參考教程》、《JavaScript代碼風格指南》,也希望大家多多支持武林網。
新聞熱點
疑難解答