onclick和onblur的冲突问题 - 唐孟西

公告

新浪首页的搜索框里面有一个使用ajax的下拉框。我们需要实现一个点击下拉框里面的一项，让搜索框里面的值变成这一项，同时下拉框消失的效果，但同时在点击其他地方的时候，这个下拉框也要消失。大致如图：

我们同时使用onblur和onclick来使下拉框隐藏，但是更大的问题出现了，这两个功能相冲突，onblur过于强悍，根本没有onclick方法实现的机会，搜索框无法获取点击项的内容。这个就是我们想要解决的onclick和onblur冲突问题。

对应这个问题，这里我们介绍两种解决办法：

1. 使用setTimeout来使onblur时间延期执行，使onclick执行完后再执行onblur。（其中setTimeout的时间设定应该在100ms以上，否则依旧不行）示例代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{  margin: 0; padding: 0;  list-style: none;  }
        form{
            width:500px;
            margin:0 auto;
            position:relative;
            zoom:1;
        }
        form:after{
            clear:both;
            content:"";
            display:block;
        }
        .text{
            float:left;
            border:1px solid #cccccc;
            padding-left:14px;
            width:300px;
            height:34px;
            line-height:34px;
            font-size:14px;
        }
        .button{
            width:50px;
            height:34px;
            border:1px solid #cccccc;
            line-height:34px;
            font-size:14px;
            color:#ffffff;
            background:#ff8400;
        }
        ul{
            position:absolute;
            top:36px;
            left:0;
            width:300px;
            border-right:1px solid #cccccc;
            border-left:1px solid #cccccc;
            background:green;
            display:none;
        }
        li{
            font-size:14px;
            line-height:34px;
            height:34px;
            color:#000000;
            border-bottom:1px solid #cccccc;
        }
        li:hover{
            background:yellow;
            color:red;
            cursor:pointer;
        }
    </style>
    <script>
        window.onload=function(){
            var oText=document.getElementById('text');
            var oUl=document.getElementById('ul');
            var aLi=oUl.getElementsByTagName('li');
            var timer=null;
            oText.onfocus=function(){
                this.value='';
                oUl.style.display='block';
                for(var i=0;i<aLi.length;i++){
                    aLi[i].onclick=function(){
                        clearTimeout(timer);
                        oText.value=this.innerHTML;
                        oUl.style.display='none';
                    };
                }
            };
            oText.onblur=function(){
                timer=setTimeout(function(){
                    oUl.style.display='none';
                    if(!oText.value){
                        oText.value='请输入关键字';
                    }
                },120);
            };
        };
    </script>        
</head>
<body>
<form>
    <input type="text" value="请输入关键字" id="text" class="text"/>
    <input type="button" value="搜索" class="button"/>
    <ul id="ul">
        <li>返回窗口是否已被关闭</li>
        <li>返回窗口的文档显示区的高度</li>
        <li>返回窗口的文档显示区的宽度。</li>
        <li>设置或返回窗口的名称。</li>
        <li>返回窗口的外部高度。</li>
    </ul>
</form>
    
</body>
</html>

2. 使用document.onmousedown来代替onblur实现隐藏下拉框功能,

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         *{  margin: 0; padding: 0;  list-style: none;  }
  8         form{
  9             width:500px;
 10             margin:0 auto;
 11             position:relative;
 12             zoom:1;
 13         }
 14         form:after{
 15             clear:both;
 16             content:"";
 17             display:block;
 18         }
 19         .text{
 20             float:left;
 21             border:1px solid #cccccc;
 22             padding-left:14px;
 23             width:300px;
 24             height:34px;
 25             line-height:34px;
 26             font-size:14px;
 27         }
 28         .button{
 29             width:50px;
 30             height:34px;
 31             border:1px solid #cccccc;
 32             line-height:34px;
 33             font-size:14px;
 34             color:#ffffff;
 35             background:#ff8400;
 36         }
 37         ul{
 38             position:absolute;
 39             top:36px;
 40             left:0;
 41             width:300px;
 42             border-right:1px solid #cccccc;
 43             border-left:1px solid #cccccc;
 44             background:green;
 45             display:none;
 46         }
 47         li{
 48             font-size:14px;
 49             line-height:34px;
 50             height:34px;
 51             color:#000000;
 52             border-bottom:1px solid #cccccc;
 53         }
 54         li:hover{
 55             background:yellow;
 56             color:red;
 57             cursor:pointer;
 58         }
 59     </style>
 60     <script>
 61         window.onload=function(){
 62             var oText=document.getElementById('text');
 63             var oUl=document.getElementById('ul');
 64             var aLi=oUl.getElementsByTagName('li');
 65             var timer=null;
 66             oText.onfocus=function(){
 67                 this.value='';
 68                 oUl.style.display='block';
 69                 for(var i=0;i<aLi.length;i++){
 70                     aLi[i].onclick=function(){
 71                         clearTimeout(timer);
 72                         oText.value=this.innerHTML;
 73                         oUl.style.display='none';
 74                     };
 75                 }
 76             };
 77             
 78             document.onmousedown=function(ev){
 79                 var oEvent=ev||event;
 80                 var target=oEvent.target||oEvent.srcElement;
 81                     if(target.parentNode!==oUl&&target!==oText){
 82                         oUl.style.display='none';
 83                     }
 84                 
 85             };
 86             oText.onblur=function(){
 87                 if(!oText.value){
 88                     oText.value='请输入关键字';
 89                 }    
 90             };
 91         };
 92     </script>        
 93 </head>
 94 <body>
 95 <form>
 96     <input type="text" value="请输入关键字" id="text" class="text"/>
 97     <input type="button" value="搜索" class="button"/>
 98     <ul id="ul">
 99         <li>返回窗口是否已被关闭</li>
100         <li>返回窗口的文档显示区的高度</li>
101         <li>返回窗口的文档显示区的宽度。</li>
102         <li>设置或返回窗口的名称。</li>
103         <li>返回窗口的外部高度。</li>
104     </ul>
105 </form>
106     
107 </body>
108 </html>

posted on 2016-04-28 09:53 唐孟西阅读(2215) 评论(0) 收藏举报

刷新页面返回顶部