php中input鼠标失焦触发事件,小程序input组件事件tap、input、focus、blur触发顺序

测试过程 是先点击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事件的。

最后编辑：2021-02-03作者：管理员

这个作者貌似有点懒，什么都没有留下。