JS控制文本框下方的下拉框显示/隐藏的问题

情况是这样，有一个文本框，下边有一下拉框类似日历选取那样，下拉框里有按钮可点击，当鼠标点击(或聚焦)文本框时，下拉框显示，点击下拉框内时也不隐藏，点击下拉框外边时（也就是任意空白地方不包含下拉框）才让下拉框隐藏，但如果我绑定的是文本框的blur事件的话，点击下拉框的里边时也会被隐藏掉。。那么有什么方法可以实现点击文本框显示，点击下拉框里边不隐藏， 点击下拉框以外时(任意空白)才隐藏下拉框 的方法呢？？

http://jsfiddle.net/sa6pz/

<!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=utf-8" />
<title>无标题文档</title>
<style>

*{
    margin:0;
    padding:0;  
    }
#box{
    width:500px;
    padding:30px;
    margin:0 auto;
    background:#E1FFF2; 
    }   
.b1{
    position:relative;  
    margin-bottom:20px;
    width:300px;
    }   
input{
    height:30px;
    width:100%; 
    }   
p.slide{
    display:none;
    position:absolute;
    left:0;
    top:30px;
    width:93%;
    background:#FFFFFF;
    height:200px;   
    padding:40px 10px;
    padding-top:0;
    border:1px solid #CCC;
    z-index:999;
    overflow:hidden;
    }
#title{
    background:#339933;
    color:#fff; 
    height:30px;
    width:100%;
    display:block;

    }   

#title span{
    display:block;
    font-weight:bold;
    width:60px;
    background:#AEFDEB;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    float:left;
    }
#title span:hover{
    background-color:#09F;  
    }   
#title span.next{
    float:right;    
    }           
</style>


<

script>
window.onload=function(){
    var ob=document.getElementById('box');
    var oInp=ob.getElementsByTagName('input');
    var oSlide=ob.getElementsByTagName('p');

    var ot=document.getElementById('title');
    var tBtn=ot.getElementsByTagName('span');

    var i=0;    
    var bBtn=true;  
    for(;i<oInp.length;i++){
        oInp[i].index=i; // 索引
        oInp[i].onfocus=function(){
            bBtn=true;
            if(bBtn){   //   变量为true时才
            oSlide[this.index].style.display="block";
            }
            }       




        oInp[i].onblur=function(){
            if(bBtn){   //   变量为true时才
            oSlide[this.index].style.display="none";
            }
        }

        }// end for

    for(;i<tBtn.length;i++){
        tBtn[i].onmouseover=function(){
            bBtn=false; 
            }

        tBtn[i].onmouseout=function(){
            bBtn=true;  
        }       
        }
    } // end onload 

</script>
</head>

<body>



<div id="box">
<div class="b1">
  <input type="text" />
  <p class="slide">
  <a id="title">
      <span class="prev"><</span>
      <span class="next">></span>
    </a>
   当鼠标点击里边时，失去焦点后，如何隐藏这个框呢？
  </p>
</div>


</div>

 <!--end box-->
</body>
</html>

提供一个思路
1、绑定body元素的click事件，执行隐藏弹出层的操作，因为事件冒泡的机制，所有页面元素的click事件都能够捕获到。
2、在输入框、弹出层的click事件中，使用event.stopPropagation()防止事件冒泡。

下面是一个jsfiddle的例子。
http://jsfiddle.net/LDree/

【热门文章】

JS控制文本框下方的 下拉框显示/隐藏的问题

JS控制文本框下方的下拉框显示/隐藏的问题