新浪首页的搜索框里面有一个使用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. html页面head区域的编码书写规范

    今天我们简单的介绍一下head区域主要放置了内容.这里就不强调css和javascript了,这两者是大家所熟知的. head区一般必须加入的标识有: 公司版权注释 <!--- the site ...

  2. 分享8款绚丽的HTML5/jQuery特效插件

    有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...

  3. 错误“Unexpected namespace prefix "xmlns" found for tag LinearLayout”的解决方法

    编写布局代码时发现xml脚本出现错误“Unexpected namespace prefix "xmlns" found for tag LinearLayout”,原来是一个na ...

  4. SignalR的简单实现

    1创建mvc的空项目 2添加文件夹Counters放在里面的类用于封装性能计数器 3创建PerfCounterWrapper类用于封装性能计数器的实体 using System; using Syst ...

  5. 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

    之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

  6. ZOJ 2588 Burning Bridges（求含重边的无向连通图的割边） - from lanshui_Yang

    Burning Bridges Time Limit: 5 Seconds Memory Limit: 32768 KB Ferry Kingdom is a nice little country ...

  7. curl模拟Http请求

    一.get请求 curl "http://www.baidu.com" 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i "http://w ...

  8. vim的列编辑操作

    转载:http://www.cnblogs.com/xiaowant/articles/1992923.html 删除列 1.光标定位到要操作的地方. 2.CTRL+v 进入“可视 块”模式,选取这一 ...

  9. .Net中的socket编程例子

    vb2010: '发送端代码Public Class Form1    Inherits System.Windows.Forms.FormPrivate Sub Button1_Click(ByVa ...

  10. c#几个小例子引发的思考

    楚广明老师的c#教程每一节都会给出几个小例子让大家联系,对于初学者来说这确实是一件很纠结的事情,下面我把这几个小例子简单的写一下.同时看一下我们学到了什么 1.面向过程版的圆周长面积计算 using ...