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

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

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

哈哈,再来一次,我去,咋回事,松手咋不发送了,还在录音??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/[email protected])"></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 >

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

猜你喜欢

转载自blog.csdn.net/weixin_34152820/article/details/87641711
今日推荐