求助：js点击文本框，显示一个层，鼠标点击这个层以外的地方，层自动隐藏？

类似于一个日期控件，想要实现：当鼠标点击文本框，弹出一个层，可以在层上点击操作，但鼠标点到层以外的任何地方，这个层会自动隐藏。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用 onmouseover 和 onmouseout 前一个是鼠标一上去的事件  后面一个是鼠标移走后的事件
文本框的 onmouseover 显示层  在层上操作后层的事件onmouseout 是隐藏层
给你个思路吧
|------------------------------------------------------|
|       外面的DIV，半透明的，浏览器多大这个就多大     |
|             你在这里设置处理函数响应点击事件         |
|                                                      |
|          |----------------------------------|        |
|          |        这是里面的DIV             |        |
|          |   用户会认为这个才是弹出窗口     |        |
|          |                                  |        |
|          |----------------------------------|        |
|                                                      |
|                                                      |
|                                                      |
|------------------------------------------------------|
试了一下，onmouseout不行啊，我用onClick就行，点一下就能隐藏，显示也是文本框onfocus就行，onmouseover不行，这两个用法和onClick一样吧
<!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 id="Head1" runat="server">
    <title>1111</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type='text/javascript'>
window.onload = function(){
document.onclick = function(e){
e = e || window.event;
var dom =  e.srcElement|| e.target;
if(dom.id != "dialog" && document.getElementById("dialog").style.display == "block") {
document.getElementById("dialog").style.display = "none";
}
};
};
function openDialog(e) {
document.getElementById("dialog").style.display = "block";
e = e||window.event;
if(+'\v1') {
e.stopPropagation();
} else  {
e.cancelBubble = true;
}

}
</script>
<style>
#dialog {
position:fixed;
left:40%;
top:100px;
background-color:#ccc;
width:200px;
height:120px;
display:none;
}
</style>
</head>
<body>
<input type="button" value="打开" onclick="openDialog(event)" />
<div id="dialog">
这是弹出层
</div>
</body>
</html>
回：cj205div 的ID 可不可以作为参数传回去，我一个页面上有几十个这样的div，做一个通用的函数，我试了试，没做出来。回jk5153286
onmouseout可以实现，我一开始弄错了，但是鼠标移到层里的其他控件元素上是，层也会关闭。
function openDialog(e，div 的ID ) {
            document.getElementById("div 的ID ").style.display = "block";
            e = e||window.event;
            if(+'\v1') {
                e.stopPropagation();
            } else  {
                e.cancelBubble = true;
            }

        }<input type="button" value="打开" onclick="openDialog(event，"div 的ID ")" />
window.onload = function(){
            document.onclick = function(e){
                e = e || window.event;
                var dom =  e.srcElement|| e.target;
                if(dom.id != "dialog" && document.getElementById("dialog").style.display == "block") {
                    document.getElementById("dialog").style.display = "none";
                }
            };
        };
主要是这部分代码，当单击文档的空白处时，怎样才能获得某一个div第id，这里的'dialog'要是一个变量的话，怎样才能检测到网页中已打开的那个div的id，并获得该id，赋给'dialog'处的变量
onmouseclick显示
onmouseblue隐藏，即失去焦点，通常是点击空白或者点击其它对象时失去焦点
上面写错了是onmouseblur才是失去焦点
按楼上的实现，必须现在显示的div上点一下，使其获得焦点，然后点击别处，才可以。怎样才能让一个div显示后同时也获得焦点呢。
我记得以前bbsxp论坛上面的菜单实现这个功能，你可以下一个过来看看。有问题请到我的博客留言，我会及时回复的。
遍历父节点，一达到目的，如有还有疑问联系我
document.onclick=function(){
    var e= window.event ? window.event: e,
    target = e.srcElement || e.target;
    while (target.nodeName.toLowerCase() != "html") {
           if(target.id="TheID"){
            break;
           }
            target = target.parentNode;
    }
    if(target.nodeName.toLowerCase()=="html"){
       alert("点击了ID以外的元素");
       document.getElementById("TheID").style.display = "none";
    }else{
        document.getElementById("TheID").style.display = "black";    }
}