Quick solution to the conflict between onclick and onblur

Home

Web Front-end

JS Tutorial

Quick solution to the conflict between onclick and onblur_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:03 PM

onclickconflict

There is a drop-down box using ajax in the search box on Sina homepage. We need to achieve the effect of clicking an item in the drop-down box so that the value in the search box changes to this item and the drop-down box disappears. But at the same time, when clicking elsewhere, the drop-down box also disappears. Approximately as shown in the picture:

Quick solution to the conflict between onclick and onblur_javascript skills

We use onblur and onclick at the same time to hide the drop-down box, but a bigger problem arises. These two functions conflict. Onblur is too powerful and there is no chance of implementing the onclick method. The search box cannot obtain the content of the clicked item. This is the conflict between onclick and onblur that we want to solve.

Corresponding to this problem, here we introduce two solutions:

1. Use setTimeout to delay the execution of onblur time, so that onblur is executed after onclick is executed. (The time setting of setTimeout should be above 100ms, otherwise it still won’t work) The sample code is as follows:

<!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. Use document.onmousedown instead of onblur to hide the drop-down box function

<!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>

The quick solution to the onclick and onblur conflict problem mentioned above is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

避免冲突与错误的NumPy库卸载指南Jan 26, 2024 am 10:22 AM

NumPy库是Python中用于科学计算和数据分析的重要库之一。然而，有时候我们可能需要卸载NumPy库，可能是因为需要升级版本或者解决与其他库的冲突问题。本文将向读者介绍如何正确地卸载NumPy库，以避免可能出现的冲突和错误，并通过具体的代码示例来演示操作过程。在开始卸载NumPy库之前，我们需要确保已经安装了pip工具，因为pip是Python的包管理工

如何解决Win11壁纸屏幕冲突Jun 29, 2023 pm 01:35 PM

如何解决Win11壁纸屏幕冲突？近期有用户在给电脑安装了一些壁纸软件之后会出现黑屏的情况，这很有可能是壁纸屏幕冲突引起的，那么对于这一情况应该如何解决呢？下面我们来看看win11系统壁纸屏幕冲突问题处理方案吧。win11系统壁纸屏幕冲突问题处理方案　　1、在桌面的设置选项中打开窗口。　　2、鼠标点击文件菜单下的运行新任务按钮。　　3、在新建任务弹框中输入explorer.exe字眼，点击确定保存并重启资源管理器即可。

热键冲突怎么解决Feb 23, 2024 am 08:12 AM

热键冲突怎么解决随着计算机技术的进步，我们在使用电脑时经常会遇到热键冲突的问题。热键是指通过键盘上的组合键或单独的功能键来实现某一操作或功能。然而，由于不同软件和系统对热键的定义各不相同，就导致了热键冲突的问题。当我们按下某个热键时，可能会触发出意料之外的功能，或者根本没有任何反应。为了解决这个问题，下面我将给大家介绍几种常见的热键冲突解决方法。第一种解决方

HTML中onclick怎么用Nov 13, 2023 am 10:07 AM

通过将onclick属性设置为一个JavaScript函数或行为，可以在用户点击某个元素时执行相应的操作。无论是直接在HTML标签中使用onclick属性，还是通过JavaScript动态地添加和修改onclick属性，都可以实现点击事件的处理。

win11输入法无法启用原因及解决方案Jan 05, 2024 pm 12:22 PM

有的用户在更新到win11系统后，发现自己的中文输入法变成了x，无法使用。其实这是因为我们处于一个无法使用输入法的位置，只需要进入可以使用输入法的地方就可以解决了。win11输入法已禁用是为什么：答：因为在无法输入的位置。1、一般这种情况都是出现在查看桌面的时候。2、因为大部分时候，我们在桌面上是无法输入文字的。3、所以我们只需要来到可以输入文字的地方就可以解决了。4、例如QQ、微信、文档、记事本、网页等各种能输入的位置都能解决已禁用输入法的问题。

MySQL MVCC 原理揭秘：如何处理并发事务的读写冲突？Sep 08, 2023 am 08:37 AM

MySQLMVCC原理揭秘：如何处理并发事务的读写冲突？引言：在数据库系统中，事务的并发执行是必不可少的。然而，并发执行也带来了一系列的问题，其中之一就是读写冲突。当多个事务同时读写同一个数据时，就可能出现不一致的情况。为了解决这个问题，MySQL引入了多版本并发控制（MVCC）机制。本文将揭秘MVCC的原理，详细解析MySQL是如何处理并发事务的读写冲

解决Zepto和jQuery同时使用可能导致的冲突问题Feb 24, 2024 pm 06:36 PM

如何正确处理Zepto和jQuery共用时的潜在冲突问题？在前端开发中，我们经常会遇到需要同时使用Zepto和jQuery的情况，但是由于两者在实现上存在一些差异，有时会引发潜在的冲突问题。本文将指导你如何正确处理Zepto和jQuery共用时的冲突问题，并提供具体的代码示例。一、引入Zepto和jQuery首先，我们需要在项目中同时引入Zepto和jQue

win10最新版本1909驱动冲突怎么办Jan 07, 2024 pm 12:45 PM

对于更新后的win101909系统，有部分小伙伴使用过程中就发现了1909驱动不兼容，驱动冲突的情况。小编觉得这种情况可以尝试更新驱动，或者是恢复到老版本的驱动就可以解决问题。下面一起来看下具体怎么做吧。win101909驱动冲突怎么办方法一1、找到桌面上的“此电脑”图标，右键点击。点击之后会弹出菜单，选择“属性”2、打开窗口之后，找到并点击窗口左侧的“设备管理器”按钮3、找到“显示适配器”下的显卡型号一项，右键点击，并在弹出的菜单中选择“更新驱动程序”4.点击之后，在新弹出的窗口中选择“自动搜

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

Atom editor mac version download

The most popular open source editor

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),