在做表单验证时我们会经常遇到blur和click冲突的情况
举个栗子:
问题:当焦点在输入框时,点击取消按钮会触发blur和click事件,导致需要点击两次取消按钮才能关闭弹窗
原因:这是因为blur事件比click事件先触发,而 javascript为单线程,同一时间只能执行处理一个事件 ,所以当blur处理程序时,导致其后续click事件并不会执行
解决方案1:如果click事件比blur事件先触发就没有问题了,所以可以给blur事件延迟触发
解决方案2:将click事件改为mousedown事件,让其优先于blur事件执行(缺点是用户体验不好,鼠标按下便触发了事件)
解决方案3:给按钮添加一个mousedown事件,在其中执行event.preventDefault()阻止浏览器默认事件,这样点击按钮时输入框就不会失去焦点了
在javascript中,可以为某个元素指定事件,指定的方式有以下三种:1、在html中,使用onclick属性
2、在javascript中,使用onclick属性
(1)注意函数名没有双引号。
3、在javascipt中,使用addEvenListener()方法
三种方法的比较
(1)在第二、三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以。
一些语法细节
(1)在第一种方法中,onclick大小写无关,但在第二种方法中,必须使用小写。因为HMTL对大小写不敏感,而JS则会区分大小写。
(2)在第二、三种方法中,指定函数名时没有双引号,而第一种作为一个HTML属性,需要双引号。
(3)第一种方法需要括号,第二、三种不需要。
onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2
document.getElementById("adEventListener").addEventListener("click",clickHandler2)