目录

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

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
耶啵奶膘2 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界17 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨17 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆17 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0118 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app
大叔_爱编程1 天前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
咸虾米_2 天前
uniapp微信小程序获取用户手机号uniCloud云开发版
微信小程序·小程序·uni-app·unicloud·获取手机号
伊泽瑞尔.2 天前
uniapp自定义目录tree(支持多选、单选、父子联动、全选、取消、目录树过滤、异步懒加载节点、v-model)vue版本
uni-app