vue的input事件与点击事件冲突,先失焦点
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
场景:在开发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>




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 个月前
更多推荐
所有评论(0)