【原创】JavaScript中,给input绑定了一个blur事件,在点击button的时候先触发blur事件的解决办法

2,227 阅读1分钟

场景:

在写项目的过程当中,遇到这样一个需求,我有一个input输入框,我给它绑定了一个onblur事件,它的作用是使外面的button消失, 这没问题,但是另外一个需求是,当我点击button的时候,先触发button的点击事件,执行完里面的程序之后,在让button消失

遇到的bug:

这个时候我直接去点击button,会出现一个bug,我鼠标点击下去的时候,input判定失去焦点了,会先直接执行blur,这时候执行了blur,button已经消失了,就点击不到button了,触发不了click事件, 之前的解决方式是在blur事件里加一个100毫秒的定时器

解决:

将onclick换成onmousedown就可以了, 因为mousedown事件是监听我鼠标按下的时候,所以我鼠标按下的那一瞬间,mousedown就已经执行了,这时候就会先按下鼠标执行mousedown,按下之后input才判断是否失去焦点