软件开发培训班 >> 编程开发 >> JavaScript

js点击出现场层层外点击层消失的代码

　　本文标签：js,层外点击层消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
        <title>点击一个连接显示层'点击其他区域隐藏 练习 by 脚本之家</title> 
        <style type="text/css"> 
            #myDiv{ 
                border:1px solid #000000; 
                width:200px; 
                height:100px; 
                background:#cccccc; 
            } 
        </style> 
        <script language="JavaScript" type="text/javascript"> 
        function addListener(element,e,fn){ 
     if(element.addEventListener){ 
    element.addEventListener(e,fn,false); 
     } else { 
     element.attachEvent("on" + e,fn); 
     } 
    } 
        addListener(document,"click",function(evt){ 
                var evt = window.event?window.event:evt,target=evt.srcElement||evt.target; 
                if(target.id == "showDiv"){ 
                    document.getElementById("myDiv").style.display = ""; 
                    return; 
                }else{ 
                    while(target.nodeName.toLowerCase() != "div" && target.nodeName.toLowerCase() != "html"){ 
                        target = target.parentNode;         
                    } 
                    if(target.nodeName.toLowerCase() == "html"){ 
                        document.getElementById("myDiv").style.display = "none"; 
                    } 
                         
                     
                }             
        }) 
        </script> 
    </head> 
    <body> 
        <div id="myDiv" style="display:none;">脚本之家</div> 
        <input type="button" value="出来吧层" id="showDiv" /> 
    </body> 
</html>

技术文章快速查找

10个基于Jquery的幻灯片插件教程

javascript判断用户浏览器插件安装情况的代码

JS 实现导航栏悬停效果(续2)

MooTools 1.2介绍

网页禁用右键实现代码（JavaScript代码）

HTML页面滚动时获取离页面顶部的距离2种实现方法

如何使用jquery动态加载js,css文件实现代码

纯JS实现动态时间显示代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建