click触发了input的blur事件

情景

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

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

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


    0.jpg

故障

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

解决方式

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

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容