昨天开发微信小程序按住录音，松手停止录音的功能。刷刷刷三下两下开发完成。嗯，开发工具上测试没问题，调试模式真机测试没问题，很好完美。
然后发布体验版，扫码体验一番，第一次按住录音，松手发送，嗯，不错，得意！！。
哈哈，再来一次，我去，咋回事，松手咋不发送了，还在录音？？touchend触发不了。
开发工具上扫码预览试试，也有这个问题。
所以现在情况就是：
开发工具、调试模式运行：正常
预览和体验发布有问题：第一次可以正常触发，第二次开始就无法触发touchend事件
网上一搜，没啥可用的资料。
冷静想一下，给start和end事件写上toast，把出问题的代码挪来挪去，试了好几把。
终于找到原因：跟position:fixed有关，放在正常容器里面没问题
但是得用position:fixed来将按钮放在底部啊，重新写了一个按钮，咦，在position:fixed下工作正常，没毛病。
出问题的button
<button class="chat_voice_button" bind:touchstart='startRecorderHandle' bind:touchend="sendRecorderHandle"
style="background-image:url({{staticUrl}}/chat/icon_voice@2x.png)"></button>
没毛病的button
<button bind:touchstart='startRecorderHandle' bind:touchend="sendRecorderHandle" >test</button>
对比一下就button里面写了个test和背景图两个区别
给button里写个字试试，果然没问题了。
所以另一个解决方案就是给button里写一个全角的空格
今天早上一来，重新写了一个空白页面继续测试，结果如下：
以下代码会有touchend触发不了的问题，导致个问题的必要条件是：
1、容器具有 position:fiexd 并且bottom或right:0px（top和left:0px会稍微好一点，触发几率大一点）)
2、button里面没有内容
<view style="position:fixed;bottom:0rpx">
<button bind:touchstart='startHandle' bind:touchend="endHandle" style="width:200rpx;height:200rpx;background-color:red"></button>
</view >
去掉bottom:0rpx,就算有position:fiexd也没问题
<view style="position:fixed;">
<button bind:touchstart='startHandle' bind:touchend="endHandle" style="width:200rpx;height:200rpx;background-color:red"></button>
</view >
button里面加文字也没问题
<view style="position:fixed;bottom:0rpx">
<button bind:touchstart='startHandle' bind:touchend="endHandle" style="width:200rpx;height:200rpx;background-color:red">test</button>
</view >
好了，这个问题到此为止吧，写出来给大家少走点弯路。
网友评论