工作中遇到一个需求, 创建新用户的时候, 需要验证用户名是否重名, 当input失去焦点的时候发送请求验证, 可是遇到了一个问题, 当关闭弹框的时候, 也会触发验证请求, 这就很不友好了, 如图:
随便搞得, 标题什么的大家不要在意哈!
首先想到的解决方法是在click事件中加一个标识, 在blur中进行判断, 如果标识变了, 就不发生请求, 可是并没有效果, 因为blur事件在click事件之前触发.
然后尝试给blur事件设置一个定时器, 变成异步事件, 这样, 就可以先触发click事件了.
想法是美好的, 现实是残酷的, 仍然失败.
证明blur事件和click事件之间有个时间差, 在click事件执行前, 定时器已经触发了, 通过验证得知, blur事件与click事件之间大概有 100-200毫秒的时间差, 定时器的时间需要大于200才能阻止触发. 如图:
这个时候就可以发送请求.
不过, 我还有个场景, input失去焦点的时候, 里面的内容添加到下面的列表中, 每列都有一个删除事件, 这个时候, 如果input输入了一半, 突然想删除其中一列, 这个时候就会触发blur事件.
如果按上面的方法解决的话, 每次触发blur事件, 都会有一个明显的延迟, 这个就很不爽了, 这时候就需要别的解决方法.
之所以需要给blur事件添加定时器, 是因为blur事件比click事件先触发, 如果可以在blur事件之前触发, 这个时候阻止默认事件, 就不需要给blur事件添加定时器.
这个时候就需要给删除事件绑定mousedown事件, 它的优先级高于blur事件.
因为本人太懒, 就不上图了, 工作中的图上传不太好哈.
