关于DIV隐藏和关闭问题


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div_bg {
border: 1px solid #9b9b9b;overflow: auto;float: left;position: fixed;width: 242px;
height: 266px;z-index: 9999;background-color: #fff;display: none;
}
.div_bg ul li {
line-height: 32px;height: 32px;padding: 0px 8px;text-align: left;
}
.div_bg ul li:hover {
background-color: #d8edfb;border-top: 1px solid #9b9b9b;
border-bottom: 1px solid #9b9b9b;line-height: 30px;height: 30px;cursor: pointer;
}
</style>
<script>
function closediv() {
document.getElementById("div_bg").style.display = "none";
}function showdiv() {
document.getElementById("div_bg").style.display = "block";
}
</script>
</head>
<body>
<input type="text" onfocus="showdiv()"  onblur="closediv()"/>
<div class="div_bg" id="div_bg">
<ul>
     <li>11111111111111111</li>
        <li>22222222222222222</li>
        <li>33333333333333333</li>
        <li>44444444444444444</li>
        <li>11111111111111111</li>
        <li>22222222222222222</li>
        <li>33333333333333333</li>
        <li>44444444444444444</li>
        <li>11111111111111111</li>
        <li>22222222222222222</li>
        <li>33333333333333333</li>
        <li>44444444444444444</li>
        <li>11111111111111111</li>
        <li>22222222222222222</li>
        <li>33333333333333333</li>
        <li>44444444444444444</li>
    </ul>
</div>
</body>
</html>
这段html代码在input获取鼠标焦点的时候会显示div，当丢失焦点的时候DIV会被隐藏。
由于在于div显示的内容比较多时需要用到滚动条，但是想要用鼠标拖动滚动条的时候input就会失去焦点，从而div被关闭。
高手们能不能帮忙解决下div在失去焦点的时候自动关闭，但是却不能再用鼠标拖动滚动条的时候关闭。

解决方案 »

  1.   

    我觉得你的思路有问题：input离开焦点就隐藏了，那就木有办法再显示（在你点滚动条前就隐藏）
    我想这样改一下：鼠标点击在input与div身上就显示div，点其他任意地方就隐藏div。<input type="text" id="a" onclick="stopclick(event)" />
    <div class="div_bg" id="div_bg" onclick="stopclick(event)">
        <ul>
            <li>点这里也不隐藏哦</li>
            <li>22222222222222222</li>
            <li>33333333333333333</li>
            <li>44444444444444444</li>
            <li>11111111111111111</li>
            <li>22222222222222222</li>
            <li>33333333333333333</li>
            <li>44444444444444444</li>
            <li>11111111111111111</li>
            <li>22222222222222222</li>
            <li>33333333333333333</li>
            <li>44444444444444444</li>
            <li>11111111111111111</li>
            <li>22222222222222222</li>
            <li>33333333333333333</li>
            <li>44444444444444444</li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementsByTagName("html")[0].onclick=function(e){
                document.getElementById("div_bg").style.display="none";
            }
        };
        function stopclick(e){
            document.getElementById("div_bg").style.display="block";
            if ( e && e.stopPropagation )
                e.stopPropagation();
            else
                window.event.cancelBubble = true;
        }
    </script>
      

  2.   

    不应该是点击div...., 只应该是在div之上就不可以隐藏<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css" >
        .div_bg {
            border: 1px solid #9b9b9b;overflow: auto;float: left;position: fixed;width: 242px;
            height: 266px;z-index: 9999;background-color: #fff;display: none;
        }
        .div_bg ul li {
            line-height: 32px;height: 32px;padding: 0px 8px;text-align: left;
        }
        .div_bg ul li:hover {
            background-color: #d8edfb;border-top: 1px solid #9b9b9b;
            border-bottom: 1px solid #9b9b9b;line-height: 30px;height: 30px;cursor: pointer;
        }
    </style>
    <script type="text/javascript" >
        function closediv() {
            setTimeout(function () {
                if (document.getElementById("div_bg").getAttribute("ondiv") == "0") {
                    document.getElementById("div_bg").style.display = "none";
                }
            }, 800);
        }    function showdiv() {
            document.getElementById("div_bg").style.display = "block";
        }    function setFlag(obj, v) {
            obj.setAttribute("ondiv", v);
        }
    </script>
    </head>
    <body>
    <input type="text" onfocus="showdiv()" onclick="showdiv()"  onblur="closediv()"/>
    <div class="div_bg" id="div_bg" ondiv="0" onmouseover="setFlag(this,1)" onmouseout="setFlag(this,0);closediv();" >
        <ul>
            <li>11111111111111111</li>
            <li>22222222222222222</li>
            <li>33333333333333333</li>
            <li>44444444444444444</li>
            <li>11111111111111111</li>
            <li>22222222222222222</li>
            <li>33333333333333333</li>
            <li>44444444444444444</li>
            <li>11111111111111111</li>
            <li>22222222222222222</li>
            <li>33333333333333333</li>
            <li>44444444444444444</li>
            <li>11111111111111111</li>
            <li>22222222222222222</li>
            <li>33333333333333333</li>
            <li>44444444444444444</li>
        </ul>
    </div>
    </body>
    </html>
      

  3.   

    其实效果用外链窗口更直观。
    http://jsbin.com/iyoris/1/
      

  4.   

    请问下
    <script type="text/javascript">
        window.onload=function(){
            document.getElementsByTagName("html")[0].onclick=function(e){
                document.getElementById("div_bg").style.display="none";
            }
        };
        function stopclick(e){
            document.getElementById("div_bg").style.display="block";
    //请问下下面这个if...else有什么作用，既然都设置div显示了，还需要它干嘛？
    e && e.stopPropagation这个得到的结果是什么？
    e.stopPropagation();这是什么情况？
    window.event.cancelBubble = true;实在不明白
            if ( e && e.stopPropagation )
                e.stopPropagation();
            else
                window.event.cancelBubble = true;
        }
    </script>
      

  5.   

    if ( e && e.stopPropagation )
                e.stopPropagation();//标准浏览器阻止冒泡
            else
                window.event.cancelBubble = true;//IE浏览器阻止冒泡
    =========================
    因为设置成点击任意地方都会关闭DIV,而关键的两个地方除外，除外的方法就是阻止它冒泡到html.你了解一下事件冒泡就会明白的。