在小程序里面,松手之后会概率性出现 touchend 不触发的问题。这篇日志主要记录如何处理 touchend 事件不触发的问题。

背景概述

最近在做一个小程序项目,有一个场景是这样的:手按下时开始录音,手松开时结束录音。在测试的时候偶发录音没有停止的情况。

通过打印日志发现是 touchend 事件没有触发。

解决方案

1、将录音按钮的 position: fixed 定位改为 position: absolute 定位;

2、禁止touchstart的默认事件;

<view
    @touchstart.prevent="handleTouchStart"
    @touchend="handleTouchEnd"
>
</view>

3、监听touchcancle方法。

<view
    @touchstart.prevent="handleTouchStart"
    @touchend="handleTouchEnd"
    @touchcancel="handleTouchEnd"
>
</view>

参考链接

  1. 微信小程序touchend事件不触发的bug解决 - 简书.
  2. 彻底解决touchend事件无法触发.
  3. touchend 不触发 | 微信开放社区.