JavaScript中blur方法是什么意思?

JavaScript019

JavaScript中blur方法是什么意思?,第1张

blur是失去焦点的意思。

失去焦点就是指当前焦点不在元素上面,也就是当前默认的输入响应元素不是当前元素。

blur一般用在input元素当中,在元素失去焦点的时候触发事件。

在做表单验证时我们会经常遇到blur和click冲突的情况

举个栗子:

问题:当焦点在输入框时,点击取消按钮会触发blur和click事件,导致需要点击两次取消按钮才能关闭弹窗

原因:这是因为blur事件比click事件先触发,而 javascript为单线程,同一时间只能执行处理一个事件 ,所以当blur处理程序时,导致其后续click事件并不会执行

解决方案1:如果click事件比blur事件先触发就没有问题了,所以可以给blur事件延迟触发

解决方案2:将click事件改为mousedown事件,让其优先于blur事件执行(缺点是用户体验不好,鼠标按下便触发了事件)

解决方案3:给按钮添加一个mousedown事件,在其中执行event.preventDefault()阻止浏览器默认事件,这样点击按钮时输入框就不会失去焦点了