blur事件与click事件的冲突

最新推荐文章于 2025-10-16 22:10:41 发布

原创最新推荐文章于 2025-10-16 22:10:41 发布 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #js #javascript

前端同时被 3 个专栏收录

24 篇文章

订阅专栏

JavaScript

6 篇文章

订阅专栏

JQuery

4 篇文章

订阅专栏

本文探讨了在前端开发中遇到的blur与click事件执行顺序问题，即blur事件优先于click事件执行的现象，并提供了两种解决方案：一是使用setTimeout延时处理blur事件；二是将click事件改为mousedown事件来改变执行顺序。

定义：
blur事件：当元素失去焦点时发生 blur 事件
click事件：当单击元素时，发生 click 事件

在开发中会发现存在以下场景，点击当前输入框以外的其他元素。此时输入框失焦触发blur事件，同时我们点击的元素触发了click事件。这时候，你会发现blur事件是优先于click事件的。

在开发中，遇到了两次，一次是输入框blur与单选click，一次是输入框blur与下拉框click。感觉出现场景还是很高的，所以记录下。

简化例子如下：

//输入框失焦触发事件1，点击单选元素触发事件2。
$('#form_wrap').on('blur', 'input[type=text]', function(){
	//事件1
}).on('click', 'input[type=radio]', function(){
	//事件2
})

这时你会发现，click事件没有执行。这是因为blur事件优先于click事件
解决方法有两种：
1.使用setTimeout定时器让blur事件延时，让click事件优先处理

//输入框失焦触发事件1，点击单选元素触发事件2。
$('#form_wrap').on('blur', 'input[type=text]', function(){
	setTimeout(function(){
		//事件1
    }, 200);
}).on('click', 'input[type=radio]', function(){
	//事件2
})

2.将click事件改成mousedown事件，让其优先于blur事件执行。
因为执行顺序mousedown > mouseup > blur

//输入框失焦触发事件1，点击单选元素触发事件2。
$('#form_wrap').on('blur', 'input[type=text]', function(){
	//事件1
}).on('mousedown ', 'input[type=radio]', function(){
	//事件2
})