新浪首页的搜索框里面有一个使用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实现隐藏下拉框功能,

 <!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';

                     };

                 }

             };

             document.onmousedown=function(ev){

                 var oEvent=ev||event;

                 var target=oEvent.target||oEvent.srcElement;

                     if(target.parentNode!==oUl&&target!==oText){

                         oUl.style.display='none';

                     }

             };

             oText.onblur=function(){

                 if(!oText.value){

                     oText.value='请输入关键字';

                 }

             };

         };

     </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>

onclick和onblur的冲突问题的更多相关文章

  1. 记录下帮助一位网友解决的关于android子控件的onTouch或onClick和父OnTouch 冲突的问题。

    前三天收到位网友的私信求助,问题大概如标题所示.具体是下面的情况,个人感觉,这个问题挺有趣,也会在实际项目开发中很常见.不想看前奏的请直接跳至解决方法. 问题原型: 父控件是自定义的 LinearLa ...

  2. Android中处理OnClick和OnTouch方法冲突的解决方案

    目前想到的最好的解决方法,大家有更好的欢迎告知. 问题:在一个view中有一个按钮,要求可以通过点按移动这个按钮,同时单纯的点击而不移动这个按钮的话可以跳转到新的Activity. 遇到的困难:按钮的 ...

  3. onchange、onclick、onblur等事件区别

    onblur:控件在失去焦点的时候触发 OnChange:当控件的内容发生改变时触发该事件 OnClick:点击该控件时触发 OnKeyDown:在控件有焦点的情况下,按下键时发生 OnKeyUp:在 ...

  4. js中基本事件的总结，onclick、onblur、onchange等

    js中的基本事件总结: 特定的场景下发生的一个动作:事件:事件=函数(),事件发生会触发函数执行. 属性 当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 on ...

  5. 事件之onTouch方法的执行过程 及和 onClick执行发生冲突的解决办法

    转载:http://blog.csdn.net/jiangwei0910410003/article/details/17504315#quote 博主推荐: 风萧兮兮易水寒,“天真”一去兮不复还.如 ...

  6. Android中onTouch方法的执行过程以及和onClick执行发生冲突的解决办法

    $*********************************************************************************************$ 博主推荐 ...

  7. Salesforce LWC学习(十七) 前端知识之 onclick & onblur & onmousedown

    在Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空. 针对此种情况我们打算优化一 ...

  8. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  9. js实现element中可清空的输入框（2）

    接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...

随机推荐

  1. linux脚本^M: bad interpreter:解决方法

    转自:http://blog.csdn.net/huiguixian/article/details/6386774 在Linux中执行.sh脚本,异常提示/bin/sh^M: bad interpr ...

  2. 使用 Team Foundation 版本控制命令

    使用 Team Foundation 版本控制命令 Visual Studio 2013   其他版本 Visual Studio 2010 Visual Studio 2008 Visual Stu ...

  3. Center OS jdk tomcat安装

    一.jdk安装 1.下载jdk    jdk-6u26-linux-i586-rpm.bin    2  安装jdk    #sh jdk-6u26-linux-i586-rpm.bin 3.#set ...

  4. 对jquery的 attr()和prop()理解

    jquery1.6版本后引入了prop()方法,很多时候总是混淆attr()与prop()这俩,下面分析一下这俩的区别 在此之前,先来了解一下html 的attribute和property,因为jq ...

  5. 一行命令搞定VS2012无法安装cocos2d-x-2.1.4及创建跨平台项目（二）

    转自:http://blog.csdn.net/yangjingui/article/details/9418843 由于上次发了一个比较二的方法来解决VS2012无法安装cocos2d-x-2.1. ...

  6. Qt动画效果的实现，QPropertyAnimation

    Qt动画架构中的主要类如下图所示: 动画框架由基类QAbstractAnimation和它的两个儿子QVariantAnimation和QAnimationGroup组成.QAbstractAnima ...

  7. debian7 更换GCC版本

    最近在编译qt,之前用的是debian6,gcc版本是gcc-4.4,当使用debian7时,编译遇到了很多跟debian6不一样的问题,debian7的默认gcc使用的是gcc-4.7,可能是编译器 ...

  8. B. Pasha and String

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  9. 2013年arcgis培训

    关于开展“GIS空间分析及应用案例解析”培训班的通知   各企事业单位: 随着信息技术的发展,地理信息系统(简称GIS)产业异军突起,在国民经济各个行业中的应用日益广泛,物联网.智慧地球.3S技术等等 ...

  10. 《MFC游戏开发》笔记六 图像双缓冲技术：实现一个流畅的动画

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9334121 作者:七十一雾央 新浪微博:http:/ ...