JavaScript_input框中失去焦点事件和点击事件冲突的解决办法

前言：

  在开发的过程中，我们经常会有搜索的需求，其中就涉及到的知识点就包括了今天我们要说的两个重要“角色”，input框和展示列表的li。

需求：

  当我们在input框中输入内容时，展示列表能够渲染出模糊查找到对应的内容。这时，当input框失去焦点的时候，我要让展示列表隐藏或消失，而且我还想点击对应的展示列表中的li时，能够将对应li的值赋值给input。

问题：

  那么问题来了，当我点击li的时候，也就意味着input失去了焦点，我还没有选中并拿到li中的值给input，展示列表就先一步隐藏或消失了。
  看到这里，大家是不是已经想到了关键点了呢？没错，就是失去焦点事件和列表li的点击事件发生冲突了。那么，也就意味着，它们两者之间一定有一个谁先谁后的问题，该怎么解决呢？

方法

把click事件拆分成mouseup和mousedown事件

当鼠标点下，并未抬起时，让搜索框持续保持焦点状态

document.getElementsByTagName("input")[0].focus()

当鼠标抬起时，执行对应的操作，让搜索框失去焦点

document.getElementsByTagName("input")[0].blur()

这样子就解决了input失去焦点事件和展示列表li的click事件冲突问题。