uniapp中搜索栏中input的@blur和搜索按钮的@click事件存在都执行的问题

weixin_406709092025-03-26 14:20

blur与click的冲突问题

blur事件：当元素失去焦点时触发blur事件；blur和focus事件不会冒泡，其他表单事件都可以

click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。

在

解决方案一：

使用setTimeout将blur事件延迟进行，但会产生一种停顿感

解决方案二：

将click事件换成mousedown事件，这样事件的执行顺序就变成mousedown > mouseup > click

案例：

事件触发的先后问

这是一个简单的手机搜索页面

当我们输入搜索文字后，我设置一个blur(失去焦点事件)

复制代码

<view class="header-search">
    <view class="search-input">
		<image src="/static/images/icon_search_gray.png" mode="widthFix"></image>
		<input v-model="search" placeholder="药品名称/药品id" @blur="blurHandler" ref="searchInput">
	</view>
	<view class="search-btn" @tap="searchHandler">搜索</view>
</view>

然后点击搜索，进行判断

这是一个非常简单的流程

在JavaScript中事件的触发算的上是一种异步回调

而这种异步回调触发的先后在pc端和小程序端出现了明显的差别

在 pc 端我们输入完内容点击确认先执行了blur事件后执行了onclick事件

而在手机端先执行了onclick事件后执行了blur事件**

复制代码

<view class="search-btn" @mousedown="searchHandler">搜索</view>

这样在pc端和手机端我们都可以达到我们想要的效果

总结：小程序开发，我们测试时一定要注意在手机上测试，不要觉得电脑测试下成功了就提交了，很容易造成意想不到的问题。