首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解（17）
Dec 18 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
vue引入静态js文件的方法
Jun 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
exists(2) 慢日志(1) mt-swipe(1) Mint UI(1) openpyxl(1) 面向对象(3) 相对路径 (1) REST(1) requests(1) 相对路径(1)
You might like
咖啡的种类和口感
2021/03/03 新手入门
快速开发一个PHP扩展图文教程
2008/12/12 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php实现倒计时效果
2015/12/19 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python绘制热力图heatmap
2020/03/23 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
详解python中的异常捕获
2020/12/15 Python
留学自荐信
2013/10/10 职场文书
就业推荐表自我鉴定
2013/10/29 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
3的组成教学反思
2014/04/30 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android