click触发了input的blur事件

情景

使用input结合下拉选项自定义一个预选数据列表

• input取消焦点（blur）时需要关闭下拉选项框；

• 选择下拉选项时需要关闭下拉选项框；

  
  0.jpg

故障

点击下拉选项时，多数情况下，会先触发input的blur事件，导致出现某些缺陷

解决方式

点击事件改为mousedown 事件，并在事件中使用event.preventDefault() 就可以了

原因：
所有元素都有click事件，会产生冒泡。一个元素失去焦点，blur事件优先于click事件。只要input绑定了blur，离开时浏览器会默认执行。
改为mousedown 之后，当你点击元素的时候，mousedown 优先于blur执行，所以只要在 mousedown 事件中阻止默认事件发生就可以了！