onclick和onblur衝突問題的快速解決方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

onclick和onblur衝突問題的快速解決方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:03 PM

onclick 衝突

新浪首頁的搜尋框裡面有一個使用ajax的下拉框。我們需要實作一個點擊下拉框裡面的一項，讓搜尋框裡面的值變成這一項，同時下拉框消失的效果，但同時在點擊其他地方的時候，這個下拉框也要消失。大致如圖：

onclick和onblur衝突問題的快速解決方法_javascript技巧

我們同時使用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衝突問題的快速解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7471

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

避免衝突與錯誤的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字眼，點選確定儲存並重新啟動資源管理器即可。

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

透過將onclick屬性設定為一個JavaScript函數或行為，可以在使用者點擊某個元素時執行對應的操作。無論是直接在HTML標籤中使用onclick屬性，或是透過JavaScript動態地新增和修改onclick屬性，都可以實現點擊事件的處理。

熱鍵衝突怎麼解決 Feb 23, 2024 am 08:12 AM

熱鍵衝突怎麼解決隨著電腦科技的進步，我們在使用電腦時經常會遇到熱鍵衝突的問題。熱鍵是指透過鍵盤上的組合鍵或單獨的功能鍵來實現某一操作或功能。然而，由於不同軟體和系統對熱鍵的定義各不相同，就導致了熱鍵衝突的問題。當我們按下某個熱鍵時，可能會觸發出意料之外的功能，或者根本沒有任何反應。為了解決這個問題，以下我將介紹幾種常見的熱鍵衝突解決方法給大家。第一種解決方

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

onclick和onblur衝突問題的快速解決方法_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題