新浪首页的搜索框里面有一个使用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. iOS开发——实战总结OC篇&网易彩票开发知识点总结

    网易彩票开发知识点总结 关于网易彩票开发中遇到了不少的坑,弄了好久才弄懂,或者有些犹豫很久没用就不记得了,所以这里就总结了一下,希望以后不会忘记,就算忘记也能快速查看! /************** ...

  2. SecureCRT 滚动条设置

    不久前在Debian下使用kermit时发现kermit有一些优点,比如当串口上不断有信息打印时,仍然可以通过拖动滚动条来查看以前打印的信息,并且滚动条不会滚动到最下面.当按下回车键时,滚动条会自动滚 ...

  3. Android——AnimationDrawable 实现动画

    Android中的AnimationDrawable可以加载Drawable资源实现帧动画.实现步骤如下: 一.设置动画播放的帧资源 <?xml version="1.0" ...

  4. 琐碎-hadoop2.2.0-hbase0.96.0-hive0.13.1整合

    关于hadoop和hive.hbase的整合就不说了,这里就是在hadoop2.2.0的环境下整合hbase和hive 因为hive0.12不支持hadoop2,所以还要替换一些hadoop的jar包 ...

  5. SQL Server 数据库文件管理

    关于数据库文件的管理问题,我经常说,常在江湖混,哪有不挨棍,用的时间长了,基本上都有遇到一些数据库文件管理上的问题,比如说: 1. SQL Server数据文件空间满 2. 日志文件暴涨 3. 文件不 ...

  6. java 输入输出 函数对象构造

    /*********************输入输出*******************/   //输入字符串 不包括最后的换行符'\n'     import java.io.BufferedRe ...

  7. Pull解析-解析xml文件

    首先需要导入jar包:kxml2-2.2.2.jar 例程: main: /** * pull解析 * * @author my * */ public class DemoParserStudent ...

  8. Precompile Prefix file（.pch文件）

    参考资料: http://blog.csdn.net/lwjok2007/article/details/46385595 http://www.tuicool.com/articles/beURbe ...

  9. VMware系统运维（十六）部署虚拟化桌面 Horizon View Manager 5.2 配置池

    1.点击"添加",打开添加池界面,选择"自动池",点击"下一步" 2.选择"专用,启动自动分配",点击"下一步 ...

  10. linux和Windows下文本格式转换

    1.安装转换工具:sudo apt-get install tofrodos 2.开始转换:fromdos grade.sh