新浪首页的搜索框里面有一个使用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. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  2. iOS开发——UI篇Swift篇&UITabBarController

    UITabBarController class UITabBarControllerController: UIViewController { var titleString:String! @I ...

  3. 生成html的几种方案

    方案1: ///   <summary > ///   传入URL返回网页的html代码 ///   </summary > ///   <param   name=&q ...

  4. Java核心技术卷二部分笔记

    第1章 流与文件 1.2 文本输入与输出 第3章 网络 3.3 可中断套接字 第4章 数据库编程 4.5.2 读写LOB 4.6 可滚动和可更新的结果集 4.8 元数据 第6章 高级Swing 6.1 ...

  5. Golang学习 - unicode 包

    ------------------------------------------------------------ const ( MaxRune = '\U0010FFFF' // Unico ...

  6. Java中transient有何作用？

    transient关键字用来防止序列化域.如果一个引用类型被transient修饰,则其反序列化的结果是null.基本类型则为0.如果引用类型时不可序列化的类,则也应该使用transient修饰,它在 ...

  7. The requested URL Not Found问题

    遇到这么一个问题: 最近刚转到linux下工作 在本地运行localhost下的thinkphp程序时,出现 一开始以为是权限问题,把目录以及文件权限都改为777依然不起作用 后来发现是rewrite ...

  8. Linux公社资料库地址

    免费下载地址在 http://linux.linuxidc.com/用户名与密码都是http://www.linuxidc.com

  9. 解决IE下z-index的bug

    IE下z-index有很奇葩的BUG,就是z-index级别不生效.解决方案只有在 该元素的父级元素添加 posotion和z-index,就能识别了. element{position:relati ...

  10. codeforces 680B B. Bear and Finding Criminals(水题)

    题目链接: B. Bear and Finding Criminals //#include <bits/stdc++.h> #include <vector> #includ ...