新浪首页的搜索框里面有一个使用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. [AnuglarJS] TweenMax with ngAnimate

    Also read: http://www.cnblogs.com/Answer1215/p/3941966.html Using ngAnimate: //!annotate="YourA ...

  2. [AngularJS] Accessing Services from Console

    Using the Chrome console, you can access your AngularJS injectable services. This is down and dirty ...

  3. iOS开发——实战篇Swift篇&UItableView结合网络请求，多线程，数据解析，MVC实战

    UItableView结合网络请求,多线程,数据解析,MVC实战 学了这么久的swift都没有做过什么东西,今天就以自己的一个小小的联系,讲一下,怎么使用swift在实战中应用MVC,并且结合后面的高 ...

  4. 了解PHP中Stream（流）的概念与用法(转)

    Stream是PHP开发里最容易被忽视的函数系列(SPL系列,Stream系列,pack函数,封装协议)之一,但其是个很有用也很重要的函数.Stream可以翻译为“流”,在Java里,流是一个很重要的 ...

  5. C++面向对象的编程

    C++面向对象的编程 目录 对C++面向对象编程的理解 声明和定义类 声明和定义 构造函数 析构函数 静态成员和静态变量 类实例化对象 对象的浅复制和深复制 继承 单继承 多继承 虚函数 类模板 其他 ...

  6. C和C++函数互相调用

    Call C++ function from C & Call C function from C++ (C和C++函数互相调用) By williamxue on Jun 12, 2007 ...

  7. systemtap-与 oracle 转

    https://baoz.net/using-systemtap/ http://nanxiao.me/category/%E6%8A%80%E6%9C%AF/systemtap-%E7%AC%94% ...

  8. slf4j冲突

    今天系统启动时,突然提示如下异常. Exception in thread "main" java.lang.NoClassDefFoundError: Could not ini ...

  9. 小白日记47：kali渗透测试之Web渗透-XSS（一）

    XSS [推荐书籍:XSS跨站脚本攻击剖析与防御] xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/ ...

  10. SqlServer 之 查看表空间

    一.用到系统视图 sys.sysindexes 该视图定义如下: CREATE VIEW sys.sysindexes AS SELECT id, status = convert(int, end ...