手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

blur事件与click事件冲突的解决办法

时间:2024-10-22 20:42:08

1、糙怍牢莱事件原因说明(1).blur 事件:当元素失去焦点时触发 blur 事件;早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素,blur 和 focus 事件不会冒泡,其他表单事件都可以。(2).click 事件:当点击元素时触发 click 事件;所有元素都有此事件,会产生冒泡。问题产生的原因:因为 blur 事件比 click 事件先触发,而 javascript 为单线程,同一时间只能执行处理一个事件,所以当 blur 执行时,导致其后续 click 事件并不会执行;

blur事件与click事件冲突的解决办法

2、解决方法一:如果让 click 事件比 blur 事件先触发就没有问题了,因此可以给 blur 事件加定时器延迟触发

blur事件与click事件冲突的解决办法

3、解决方法二:将click事件改为mousedown事件,mousedown事件是优先于blur事件执行

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

blur事件与click事件冲突的解决办法

5、解决方法四:动态绑定blur事件,当鼠标进入input框父级元素时,移除input绑定事件blur,当鼠标移出输入框父级元素时,给input绑定blur事件

blur事件与click事件冲突的解决办法

6、小结:blur事件与click事件冲突的解决办法推荐使用方法三、方法四,对于用户交互体验会友善一点

© 手抄报圈