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

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端和手机端我们都可以达到我们想要的效果

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

相关推荐
2501_9160074721 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
砺能1 天前
uniapp生成的app添加操作日志
前端·uni-app
2501_915921431 天前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs1 天前
uniapp 修改android包名
android·uni-app
芒果沙冰哟1 天前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农1 天前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q19632884751 天前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
不知名的前端专家1 天前
UniApp USB存储设备U盘操作、读写原生插件
uni-app
coldriversnow1 天前
uni-app从后端返回的富文本中的视频截取一帧为封面
uni-app