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

2022-09-28 09:51:08 字數 469 閱讀 9088

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

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

對應這個問題,這裡我們介紹兩種解決辦法:

1. 使用settimeout來使onblur時間延期執行,使onclick執行完後再執行onblur。(其中settimeout的時間設定應該在100ms以上,否則依舊不行)示例**如下:

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

本文標題: onclick和onblur衝突問題的快速解決方法

本文位址:

onblur事件和onfocus事件失效

先看onblur事件和onfocus事件的定義 雙引號中的內容是一段js 也可以是乙個事件函式 在看幾個例子 btn type text placeholder 請輸入顯示歡迎學習js的次數 onfocus study prompt 請輸入顯示歡迎學習js的次數 執行以上 滑鼠點選輸入框 使輸入框獲...

click 和onclick 的區別

click 和onclick 的區別 1.onclick是繫結事件,告訴瀏覽器在滑鼠點選時候要做什麼 click本身是方法作用是觸發onclick事件,只要執行了元素的click 方法,就會觸發onclick事件。2.click 方法的主要作用是觸發呼叫click方法元素onclick事件,實際上是...

click和onclick的區別

onclick是繫結事件,告訴瀏覽器在滑鼠點選時候要做什麼 click本身是方法,作用是觸發onclick事件,只要執行了元素的click 方法,就會觸發onclick事件 click可以理解為一次簡單的觸發,只執行一次,找不到以後就不再執行 onclick則是給這個id註冊一種行為,可以重複觸發 ...