还原车祸现场
功能类似于百度搜索, 搜索框输入内容, 下拉框显示候选项, 点击候选项就选择候选项, 然后下拉框隐藏, 点击外面就直接隐藏下拉框, 于是我写了以下代码
- // 参会单位联想
- $('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 的东西.
来源: https://www.cnblogs.com/maopixin/p/10043449.html