微信webview和微信浏览器授权窗口出现的问题

场景

页面中有一个长按录音操作，在浏览器中长按div标签，弹出录音授权窗口，在普通手机浏览器中弹出授权窗口出触发@touchend事件，但是在微信浏览器和微信小程序的webview中不会触发@touchend事件，导致交互不同

最佳实践

新增@touchcancel事件

原理

• touchend

  • 触发时机：当用户手指从触摸屏上抬起时触发。

  • 典型场景：用户完成触摸操作，例如点击、滑动后松开手指。

  • 示例：用户在屏幕上滑动后松开手指，此时会触发 touchend 事件。

• touchcancel

  • 触发时机：当触摸操作被系统或其他外部因素中断时触发。

  • 典型场景：

    • 用户在触摸过程中接到电话或切换到其他应用。

    • 浏览器或操作系统接管了触摸操作（例如，用户以特定手势触发系统功能）。

    • 触摸区域被隐藏或销毁（例如，用户滑动关闭了当前页面）。

  • 示例：用户在触摸屏幕时，突然接到电话，触摸操作被中断，此时会触发 touchcancel 事件。

示例代码

<div
        @touchstart.prevent="onTouchStart"
        @touchcancel.prevent="onTouchEnd"
        @touchmove.prevent="onTouchMove"
        @touchend.prevent="onTouchEnd"
    >
      <span>{{ isRecording ? (isCancel ? '松开取消' : '松开发送') : '按住录音' }}</span>
      <div v-show="isRecording" class="recording_box_tip" :class="{ tip_cancel: isCancel }">
        {{ isCancel ? '松开取消' : '--松开放松，上滑取消--' }}
      </div>
    </div>

 这是vue3实现，通过touchcancel执行中断，在微信小程序的webview和微信浏览器都能触发