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 相关文章推荐
javascript for循环设法提高性能
Feb 24 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
如何使用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下关于中英数字混排的字符串分割问题
2010/04/06 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
浅析vue数据绑定
2017/01/17 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Python脚本实现格式化css文件
2015/04/08 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
MySQL面试题目集锦
2016/04/14 面试题
销售会计工作职责
2013/12/02 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
2015中秋祝酒词
2015/08/12 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
django中websocket的具体使用
2022/01/22 Python