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 相关文章推荐
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
Javascript中With语句用法实例
May 14 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 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强制类型转换,慎用!
2013/06/06 PHP
PHP常用的小程序代码段
2015/11/14 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
python与idea的集成的实现
2020/11/20 Python
如何进行有效的自我评价
2013/09/27 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
国际会议邀请函范文
2014/01/16 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
校园广播站开场白
2015/06/01 职场文书
python程序的组织结构详解
2021/12/06 Python
全新239军机修复记
2022/04/05 无线电
python中filter,map,reduce的作用
2022/06/10 Python