小程序input组件事件tap、input、focus、blur触发顺序

  微信小程序表单组件中的input组件应该是很常用的一个组件了,经常用到难免会要用上各种事件,这里说几个最常用的和执行顺序问题,这个没弄清楚很容易出现意料之外的结果。
  先来看看这几个事件。tap事件:这个是小程序中的点击事件,绑定语法是bindtap,微信小程序中每个组件都是有tap事件的;input事件:是键盘输入事件,绑定语法是bindinput;focus事件:输入框聚焦事件,绑定语法是bindfocus;blur事件:输入框失去焦点事件,绑定语法bindblur。
  下面通过一个例来说说它们的触发顺序:

<!-- index.wxml -->
<input bindtap="inputTap" bindinput="doInput" bindfocus="inputFocus" bindblur="inputBlur"></input>
<view bindtap="viewTap">view tap</view>
//index.js部分代码
inputTap(e){
   console.log("input tap");
},
doInput(e){
   console.log("input sth");
},
inputFocus(e){
   console.log("input focus");
},
inputBlur(e){
   console.log("input blur");
},
viewTap(e){
   console.log("view tap");
}

  测试过程 是先点击input输入框,输入一个字符,然后点击下面的view tap,从开发者工具上控制台得到的结果是:

input focus 
input tap
input blur
view tap

  由此我们得到input组件的从点击输入到点击其他组件这个过程中事件执行顺序是:foucs -> tap -> blur -> tap,最后一个tap是其他组件的点击事件,我想这个顺序应该是有些人认为的理论顺序,并且开发工具都是这样的。
  但是,在实际真机上并不是这样的,我们用这段代码在真机上调试可以看到执行顺序是:

input tap
input focus 
view tap
input blur

  上面这是实际的触发顺序:**tap -> foucs -> tap -> blur **,看到真机的结果是不是明白什么了,tap事件是优先触发的,而开发工具上的模拟器的tap事件其实是模拟的click事件。所以在开发的过程中,一定要注意这一点,比如监听input失焦的时候干点什么事情,然后再点击按钮干点什么事情,如果这两件事件有先后顺序的话就一定要注意上面这个顺序了,不然真机测试会得不到预计的结果的。
  另外关于input的tap事件和focus事件,在focus事件触发时会出现一丝丝卡顿现象,不知道是微信版本的问题还是疑问input是原生组件的原因,我是在foucs的时候弹出一个面板,用focus事件面板不是跟键盘同时弹出的,要稍微滞后一点,最后改为用tap事件解决问题了。在支付宝小程序里就没这个问题,而且支付宝小程序input组件是没有tap事件的。

  好了,以上,感谢你的阅读~~

发布了7 篇原创文章 · 获赞 3 · 访问量 6344

猜你喜欢

转载自blog.csdn.net/longfeng1234/article/details/94633176
今日推荐