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

昨天开发微信小程序按住录音，松手停止录音的功能。刷刷刷三下两下开发完成。嗯，开发工具上测试没问题，调试模式真机测试没问题，很好完美。

然后发布体验版，扫码体验一番，第一次按住录音，松手发送，嗯，不错，得意！！。

哈哈，再来一次，我去，咋回事，松手咋不发送了，还在录音？？touchend触发不了。

开发工具上扫码预览试试，也有这个问题。

所以现在情况就是：

开发工具、调试模式运行：正常

预览和体验发布有问题：第一次可以正常触发，第二次开始就无法触发touchend事件

网上一搜，没啥可用的资料。

冷静想一下，给start和end事件写上toast，把出问题的代码挪来挪去，试了好几把。

终于找到原因：跟position:fixed有关，放在正常容器里面没问题

但是得用position:fixed来将按钮放在底部啊，重新写了一个按钮，咦，在position:fixed下工作正常，没毛病。

出问题的button

          style="background-image:url({{staticUrl}}/chat/[email protected])">

没毛病的button

test

对比一下就button里面写了个test和背景图两个区别

给button里写个字试试，果然没问题了。

所以另一个解决方案就是给button里写一个全角的空格

今天早上一来，重新写了一个空白页面继续测试，结果如下：

以下代码会有touchend触发不了的问题，导致个问题的必要条件是：

1、容器具有 position:fiexd 并且bottom或right:0px（top和left:0px会稍微好一点，触发几率大一点）)

2、button里面没有内容

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

button里面加文字也没问题

test

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