uni-app ios15出现放大镜问题

在 iOS 15 的微信内置浏览器中，点击或长按元素时，系统默认会触发文本选择放大镜（text selection loupe），这确实会与 touchstart、touchmove、touchend 等手势事件产生冲突，尤其是在实现录音按钮的长按录音功能时。

这个问题并非 uni-app 的 bug，而是 iOS 15 Safari 内核（微信浏览器使用此内核）的默认行为。核心原因是：当用户长按一个可交互元素（如按钮）时，系统会先触发文本选择机制，之后才触发自定义的长按事件，导致事件响应延迟、中断或不准确。

要解决此问题，你需要通过 CSS 和事件处理来禁用该元素的文本选择行为，并阻止默认的触摸动作。

解决方案如下：

1. 在按钮的样式（CSS）中，添加以下规则：

   .your-record-button-class {
       -webkit-touch-callout: none; /* 禁用长按菜单 */
       -webkit-user-select: none; /* 禁用文本选择 */
       user-select: none;
       touch-action: manipulation; /* 优化触摸响应，避免双击缩放等 */
   }
   

   将 .your-record-button-class 替换为你录音按钮的实际类名。你可以在页面的 style 部分或 App.vue 的全局样式中设置。

2. 在按钮的事件处理函数中，阻止默认行为： 在你的录音按钮的 @touchstart 或 @mousedown 事件处理函数中，显式调用 event.preventDefault()。这可以阻止系统默认的文本选择/放大镜行为。

   <template>
     <button 
       class="record-btn"
       @touchstart="handleTouchStart"
       @touchend="handleTouchEnd"
       @touchcancel="handleTouchCancel"
     >
       按住录音
     </button>
   </template>
   
   <script>
   export default {
     methods: {
       handleTouchStart(event) {
         // 关键：阻止默认行为，禁用放大镜
         event.preventDefault();
         // 开始你的录音逻辑
         console.log('开始录音');
         // 例如，开始计时或调用录音API
       },
       handleTouchEnd(event) {
         // 结束录音逻辑
         console.log('结束录音');
       },
       handleTouchCancel(event) {
         // 处理触摸取消（如来电打断）
         console.log('录音取消');
       }
     }
   }
   </script>
   
   <style scoped>
   .record-btn {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;
     touch-action: manipulation;
     /* 其他样式 */
   }
   </style>