下拉框click事件與搜尋框blur事件的愛恨糾葛
摘要：
還原車禍現場
功能類似於百度搜尋，搜尋框輸入內容，下拉框顯示候選項，點選候選項就選擇候選項，然後下拉框隱藏，點選外面就直接隱藏下拉框，於是我寫了以下程式碼
//參會單位聯想
$('input[name="company_name"]').bind(...
還原車禍現場
功能類似於百度搜尋，搜尋框輸入內容，下拉框顯示候選項，點選候選項就選擇候選項，然後下拉框隱藏，點選外面就直接隱藏下拉框，於是我寫了以下程式碼
//參會單位聯想
$('input[name="company_name"]').bind('input propertychange', function() {
var _this = this;
clearTimeout(this.timer);
this.timer = setTimeout(function(){
$.ajax({
url:domin+'/api/company/index',
data:{
k:_this.value
},
dataType:'jsonp',
success:function(res){
if(res.status.code==0){
if(res.data.length<=0) return false;
var str = "";
res.data.forEach(function(e,i){
str += '<dd data-value="'+e.id+'" data-type="'+e.role_code+'" class="">'+e.name+'</dd>';
})
$('#company_list').html(str);
$(_this).parent().addClass('layui-form-selected');
}else {
form.val("beforehand", {
"company-type": "",
});
}
}
})
}, 1000);
$('#company_list').on('click','dd',function(){
_this.value = this.innerHTML;
postData.company_id = $(this).data('value');
form.val("beforehand", {
"company-type": company_type[$(this).data('type')]?company_type[$(this).data('type')]:"普通",
});
$(_this).parent().removeClass('layui-form-selected');
$(this).parent().html('');
isSelect = false;
})
});
$('input[name="company_name"]').blur(function(ev){
$('input[name="company_name"]').parent().removeClass('layui-form-selected');
})
先去請求資料，然後渲染列表，然後監聽候選項點選，最後blur的時候隱藏下拉框，覺得自己寫的很完美，於是便興沖沖的去測試，但是一測試我發現了大問題，在我點選列表項也就是dd 的時候，下拉框直接隱藏了，候選項的內容也沒有被填到input裡面去。我便很費解，於是便去找度娘玩耍，眾說紛紜，我在很多胡扯的評論中終於找到了。總結如下，看看完整的步驟
- 點選 dd ，此時先觸發 mousedown
- input 的 blur 觸發
- 下拉框消失
- 此時滑鼠抬起並不是在下拉框上
- dd 的 click 並沒有觸發
解決方案
- 監聽的document 的mouseup 而不是input 的blur 事件，這樣先觸發dd 的mouseup ，此時資料就已經取到，然後冒泡到document ，移除下拉框（類似於百度搜索）
- 監聽dd 的mousedown ，這也會先取值，然後input 再失焦（體驗不太好，使用者按下就會觸發，不允許糾結，比如我按下第一個的時候，突然想選擇第二個）
- dd 還是，input還是blur，全域性定義一個isSelect 變數，監聽dl 的mousedown 觸發以後修改 isSelect =true ，這樣在blur 時，先判斷isSelect 就好了。（程式碼如下）
var isSelect = false;
// some code
$('#company_list').on('click','dd',function(){
_this.value = this.innerHTML;
postData.company_id = $(this).data('value');
form.val("beforehand", {
"company-type": company_type[$(this).data('type')]?company_type[$(this).data('type')]:"普通",
});
$(_this).parent().removeClass('layui-form-selected');
$(this).parent().html('');
isSelect = false; //++
})
// some code
// 以下為新增
$('#company_list').mousedown(function(){
// 下拉框mousedown時，儲存下拉框為真
isSelect = true;
// 註冊定時器 0毫秒以後觸發，在定時器觸發之前 ，input 的失焦事件觸發此時isSelect為真
setTimeout(function(){
// 此時input的失焦已經觸發了
isSelect = false;
$('input[name="company_name"]').focus()
},0)
})
$('input[name="company_name"]').blur(function(ev){
if(!isSelect){//++
$('input[name="company_name"]').parent().removeClass('layui-form-selected');
}//++
})
雖然setTimeout 是0毫秒的延遲，但是他在下一次的事件佇列中，所以會先執行 input 的 blur 事件，再執行 setTimeout 。
有關事件迴圈EventLoop 的知識，大家可以自行百度，理解了這個，雖然不會讓你寫程式碼變厲害，但是對理解js是有很大的作用的。不過想徹底理解，需要理解巨集任務 task 與微任務 Microtasks ，以及 Promise 。
下次可能會寫一下關於EventLoop 的東西。