胖蔡说技术
随便扯扯

小程序input组件事件触发顺序记录

小程序开发过程中的记录,input的部分方法在模拟器和真机上表现不一致

需求是要监听两个input框,如果都失去焦点则隐藏两个输入框,点击后重新出现。

两个input框之间的焦点切换模式为,其中一个获取焦点,则另一个先失去焦点,就存在同时没有焦点的时候,这个切换时间在不同机器上的表现时间是不一致的。开始我的想法是利用延时过滤掉这个时间差值,由于不能确定这个时间差值有多大,所以放弃了这个想法。然后想到catchtab绑定点击事件,即监听到input点击后默认input获取到焦点,不再监听input的焦点事件。实际上模拟器中 input的点击获取焦点执行的顺序是先 bindfous回调,再执行catchtap回调,模拟器上实验失败,又一个想法可能被抛弃。不甘心的我需要先了解input的事件触发顺序,于是就查阅了部分资料,发现一个写的比较全的博客(小程序input组件事件tap、input、focus、blur触发顺序),介绍了事件的触发顺序,其中有讲到真机与模拟器的差异,于是我就在真机上验证了我的第二个想法,确实可行。

<input catchtap="catchtapLow" 
       focus="{{salaryLowFocus}}"
       bindfocus="salaryLowFocus" 
       bindblur="salaryLowBlur" />
 

可以点击查看我写的代码片段

参考文献

名称作者
小程序input组件事件tap、input、focus、blur触发顺序哪儿花开
微信官方文档.小程序developers.weixin.qq.com
赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » 小程序input组件事件触发顺序记录
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏