在web前端開發過程中，可能需要開發一個下拉選單。為了提升使用者體驗，可能需要在滑鼠點選下拉選單以外的空白處時，該下拉選單隱藏。為了解決這個問題，有幾種實現，筆者將對此分別說明，並給出自己的解決方案。
在web前端開發過程中，可能需要開發一個下拉選單。為了提升使用者體驗，可能需要在滑鼠點選下拉選單以外的空白處時，該下拉選單隱藏。為了解決這個問題，有幾種實現，筆者將對此分別說明，並給出自己的解決方案。
工具/原料
javascript
方法/步驟
需求描述:
1.點開下圖中的更多後，彈出下拉選單，使用者點選下拉選單每一項後，“全部分類處”會變成選中的那一項，比如選中了“分類1”，則紅圈部分則顯示為“分類1”
2.使用者在搜尋框輸入關鍵字後，可以點選右邊的搜尋圖示，然後根據使用者選擇的項，為使用者展現搜尋結果
3.使用者點選下拉框的任意一項後，下拉框消失；滑鼠點選頁面其他空白處時，該下拉框消失
常用解決方法
1.給下拉框每項賦予oclick方法，點選後隱藏下拉框
2.給當前window新增一個onclick方法，在該方法裡，判斷點選的事件源是否位於該下拉框元件內，判斷的方法可以通過該元件的class屬性來判斷
常用解決方法的總結與問題：
通過給window新增onclick方法可以很好的解決功能需求
問題：
1.該功能元件的功能涉及到window物件，不利於擴充套件
2.如果當前介面上有多個下拉框物件時，會出現問題
3.為了便於擴充套件，有必要將該功能需求鎖定在該元件範圍內
我的解決方案：
通過onblur控制彈出當滑鼠在頁面空白處點選時視窗的隱藏，通過onclick控制下拉框選中項點選後下拉框的消失
問題：通過實踐發現，如果只用原始的onblur和onclick，會出現如下圖所示的情況，即選中“分類3”後，下拉框消失，但綠色部分的內容，並沒有變成“分類3”
通過分析發現，該問題是有由於onblur與onclick執行衝突所導致，在該實現中，是由於onblur先觸發，導致onclick失效。
為了解決這個問題，我們可以考慮將onblur進行改寫，以符合我們的要求。我的解決方案是通過給onblur設定一個判斷條件，在滿足一定條件時觸發否則返回false不觸發。程式碼如下:
注意事項
上述程式碼用虛擬碼的形式描述瞭解決onclick和onblur衝突的問題（貼程式碼會出現樣式混亂，不利於檢視，故採用圖片形式），只是提供了一種解決方法，不能直接執行，請根據自己的應用環境進行更改。