高兴旺
下拉框click事件与搜索框blur事件的爱恨纠葛
来源:田向丽     发布时间: 2019-08-15      浏览次数:140

字号:

还原车祸现场

功能类似于百度搜索,搜索框输入内容,下拉框显示候选项,点击候选项就选择候选项,然后下拉框隐藏,点击外面就直接隐藏下拉框,于是我写了以下代码

//参会单位联想$("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+"" >"+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 并没有触发

解决方案

    监听的documentmouseup而不是inputblur事件,这样先触发ddmouseup,此时数据就已经取到,然后冒泡到document,移除下拉框(类似于百度搜索)监听ddmousedown,这也会先取值,然后input再失焦(体验不太好,用户按下就会触发,不允许纠结,比如我按下第一个的时候,突然想选择第二个)dd还是,input还是blur,全局定义一个isSelect变量,监听dlmousedown 触发以后修改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 的东西。

  • 相关内容: