场景:在开发app时,自己做了个搜索筛选,结果每次输入字符后,想在回显的列表中选数据时遇到了问题,点第一次没反应,得点击第二次才会触发事件。
发现原因:最后打印发现,在第一次点击事件时,只触发了input的blur事件,第二次才会触发点击事件,遂解决问题。
解决:因为input中blur失去焦点事件与点击事件冲突,参考https://huaweicloud.csdn.net/63a003fddacf622b8df90f57.html,将按钮click事件替换为 mousedown 事件,优先于blur事件执行,最终实现了正确效果,感恩!
原代码片段:

<!-- 页面部分 -->
<view>
			<view
				v-for="(item,index) in stationList"
				:key="index"
				:class="item.isChoose?'stationEd':'station'"
				@mousedown="handleStation(item,index)"
			>
				<view>{{item.stationName.substring(0,18)}}{{item.stationName.length>18?'...':''}}</view>
				<u-icon v-if="item.isChoose" name="checkmark" size="18" color="#3D6FFF" class="icon"></u-icon>
			</view>
		</view>
GitHub 加速计划 / vu / vue
89
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:7 个月前 )
9e887079 [skip ci] 5 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 9 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐