onclick和onblur冲突问题的快速解决方法


Posted in Javascript onApril 28, 2016

新浪首页的搜索框里面有一个使用ajax的下拉框。我们需要实现一个点击下拉框里面的一项,让搜索框里面的值变成这一项,同时下拉框消失的效果,但同时在点击其他地方的时候,这个下拉框也要消失。大致如图:

onclick和onblur冲突问题的快速解决方法

我们同时使用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冲突问题的快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS动态创建DOM元素的方法
Jun 09 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 #Javascript
JavaScript String 对象常用方法总结
Apr 28 #Javascript
JavaScript Math 对象常用方法总结
Apr 28 #Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 #Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 #Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 #Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 #Javascript
You might like
PHP学习之数组值的操作
2011/04/17 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
基于JSONP原理解析(推荐)
2017/12/04 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python 堆和优先队列的使用详解
2019/03/05 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
大班亲子运动会方案
2014/06/10 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
工作保证书怎么写
2015/02/28 职场文书
社会实践单位意见
2015/06/05 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
Python实现自动玩连连看的脚本分享
2022/04/04 Python
nginx.conf配置文件结构小结
2022/04/08 Servers
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers