考核遇到的问题的解决方法|集创考核第十一篇笔记

考核遇到的问题的解决

• 关于事件触发先后的解决，最近已经是差不多写完了掘金基础页面的静态页面了，也开始在学新的知识与在调试自己页面上的一部分bug
• 今天发现点击搜索使得搜索框进入focus状态，一开始使用的是css中的：focus控制搜索框的样式变化，bug便随之出现了 如下图所示

• 此时搜索框处于focus状态，被拉长且内部的placeholder文字发生变化，但是在输入内容出现点击搜索时发现，第一次点击搜索按钮只会触发input的失去焦点事件，而不会触发搜索按钮的js的click事件。
• 在调试之后，打印发现，input的失去焦点事件要早于搜索按钮的click事件发生，这导致了第一次点击时click事件的失效。
• 第一次修改该bug的时候，考虑使用js中的定时器控制input的blur事件，使其延慢发生，但是失败了，代码如下。

//头部的搜索框失去焦点事件,此处使用定时器处理，实现点击事件
header_container_input.addEventListener('blur',function(){
    setTimeout(function() { //进行延时处理，时间单位为千分之一秒
        header_container_input.classList.remove('header_container_input_focus')
    }, 1000)
})

• 失败后考虑，是否是因为将focus事件交给css进行控制，而css始终在js之前就对元素进行了控制，导致了上述bug仍然发生。考虑后产生了一下的js代码

//头部的搜索框失去焦点事件,此处使用定时器处理，实现点击事件
header_container_input.addEventListener('blur',function(){
    setTimeout(function() { //进行延时处理，时间单位为千分之一秒
        header_container_input.classList.remove('header_container_input_focus')
    }, 1000)
})
header_container_input.addEventListener('focus',function(){
    header_container_input.classList.add('header_container_input_focus')
    console.log(header_container_input.value);
})

• 这一次将focus和blur事件都采用js的方式绑定于input上，然后再blur内部使用定时器，达到延缓blur事件发生作用，类似于其他语言中的sleep效果，此时click事件早于blur事件发生，遂解决此处bug