微信小程序touchend事件不触发的bug解决

昨天开发微信小程序按住录音,松手停止录音的功能。刷刷刷三下两下开发完成。嗯,开发工具上测试没问题,调试模式真机测试没问题,很好完美。
然后发布体验版,扫码体验一番,第一次按住录音,松手发送,嗯,不错,得意!!。
哈哈,再来一次,我去,咋回事,松手咋不发送了,还在录音??touchend触发不了。
开发工具上扫码预览试试,也有这个问题。
所以现在情况就是:

开发工具、调试模式运行:正常
预览和体验发布有问题:第一次可以正常触发,第二次开始就无法触发touchend事件
网上一搜,没啥可用的资料。
冷静想一下,给start和end事件写上toast,把出问题的代码挪来挪去,试了好几把。
终于找到原因:跟position:fixed有关,放在正常容器里面没问题
但是得用position:fixed来将按钮放在底部啊,重新写了一个按钮,咦,在position:fixed下工作正常,没毛病。
出问题的button

没毛病的button
【微信小程序touchend事件不触发的bug解决】
对比一下就button里面写了个test和背景图两个区别
给button里写个字试试,果然没问题了。
所以另一个解决方案就是给button里写一个全角的空格


今天早上一来,重新写了一个空白页面继续测试,结果如下:
以下代码会有touchend触发不了的问题,导致个问题的必要条件是:
1、容器具有 position:fiexd 并且bottom或right:0px(top和left:0px会稍微好一点,触发几率大一点))
2、button里面没有内容



去掉bottom:0rpx,就算有position:fiexd也没问题



button里面加文字也没问题



好了,这个问题到此为止吧,写出来给大家少走点弯路。

    推荐阅读