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 this用法小结
Dec 19 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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/21 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
大学四年个人自我小结
2014/03/05 职场文书
就职演讲稿范文
2014/05/19 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
入党积极分子群众意见
2015/06/01 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL
Python必备技巧之函数的使用详解
2022/04/04 Python