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

來源：懂視網責編：小采時間：2020-11-27 21:49:44

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

onclick和onblur沖突問題的快速解決方法_javascript技巧:新浪首頁的搜索框里面有一個使用ajax的下拉框。我們需要實現一個點擊下拉框里面的一項，讓搜索框里面的值變成這一項，同時下拉框消失的效果，但同時在點擊其他地方的時候，這個下拉框也要消失。大致如圖：我們同時使用onblur和onclick來使下拉框隱藏，但是

推薦度：

點擊下載本文 文檔為doc格式

導讀onclick和onblur沖突問題的快速解決方法_javascript技巧:新浪首頁的搜索框里面有一個使用ajax的下拉框。我們需要實現一個點擊下拉框里面的一項，讓搜索框里面的值變成這一項，同時下拉框消失的效果，但同時在點擊其他地方的時候，這個下拉框也要消失。大致如圖：我們同時使用onblur和onclick來使下拉框隱藏，但是

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

新浪首頁下拉框

我們同時使用onblur和onclick來使下拉框隱藏，但是更大的問題出現了，這兩個功能相沖突，onblur過于強悍，根本沒有onclick方法實現的機會，搜索框無法獲取點擊項的內容。這個就是我們想要解決的onclick和onblur沖突問題。

對應這個問題，這里我們介紹兩種解決辦法：

1. 使用setTimeout來使onblur時間延期執行，使onclick執行完后再執行onblur。（其中setTimeout的時間設定應該在100ms以上，否則依舊不行）示例代碼如下：

2. 使用document.onmousedown來代替onblur實現隱藏下拉框功能

以上這篇onclick和onblur沖突問題的快速解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com