微信小程序touchend事件不触发的bug解决
昨天开发微信小程序按住录音,松手停止录音的功能。刷刷刷三下两下开发完成。嗯,开发工具上测试没问题,调试模式真机测试没问题,很好完美。
然后发布体验版,扫码体验一番,第一次按住录音,松手发送,嗯,不错,得意!!。
哈哈,再来一次,我去,咋回事,松手咋不发送了,还在录音??touchend触发不了。
开发工具上扫码预览试试,也有这个问题。
所以现在情况就是:
开发工具、调试模式运行:正常网上一搜,没啥可用的资料。
预览和体验发布有问题:第一次可以正常触发,第二次开始就无法触发touchend事件
冷静想一下,给start和end事件写上toast,把出问题的代码挪来挪去,试了好几把。
终于找到原因:跟position:fixed有关,放在正常容器里面没问题
但是得用position:fixed来将按钮放在底部啊,重新写了一个按钮,咦,在position:fixed下工作正常,没毛病。
出问题的button
style="background-image:url({{staticUrl}}/chat/icon_voice@2x.png)">没毛病的button
【微信小程序touchend事件不触发的bug解决】对比一下就button里面写了个test和背景图两个区别
给button里写个字试试,果然没问题了。
所以另一个解决方案就是给button里写一个全角的空格
今天早上一来,重新写了一个空白页面继续测试,结果如下:
以下代码会有touchend触发不了的问题,导致个问题的必要条件是:
1、容器具有 position:fiexd 并且bottom或right:0px(top和left:0px会稍微好一点,触发几率大一点))
2、button里面没有内容
去掉bottom:0rpx,就算有position:fiexd也没问题
button里面加文字也没问题
好了,这个问题到此为止吧,写出来给大家少走点弯路。
推荐阅读
- 一个小故事,我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗()