点击非div区域关闭div

最新推荐文章于 2023-05-04 10:58:16 发布

zhangwenyuan2008

最新推荐文章于 2023-05-04 10:58:16 发布

阅读量248

点赞数

分类专栏： javaScript 文章标签： JavaScript 脚本 XHTML CSS HTML ViewUI

本文链接：https://blog.csdn.net/zhangwenyuan2008/article/details/83482704

版权

javaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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;"><a href="http://www.jb51.net" target="_blank">脚本之家</a></div>
        <input type="button" value="出来吧层" id="showDiv" />
    </body>
</html>