Vue使用vue-touch-events的touchhold事件时iOS长按禁止选中文本求助

可直接落地的解决方案 #

1. 补全iOS专属禁用属性

你之前加的属性只覆盖了通用和PC场景，iOS WebKit有两个独有的专属属性必须加上才能禁用长按弹出菜单和选中逻辑：
给你的包裹容器追加以下CSS：

.tw-select-none {
  /* 专门禁用iOS长按弹出系统菜单（复制/粘贴等） */
  -webkit-touch-callout: none !important;
  /* 强制禁用iOS下的文本选中能力，优先级高于通用user-select */
  -webkit-user-select: none !important;
  /* 禁用iOS点击/长按自带的半透明高亮遮罩 */
  -webkit-tap-highlight-color: transparent !important;
}

2. 替换PC端事件为移动端触屏事件

你之前绑定的onmousedown是鼠标事件，在iOS触屏场景不会触发，改成绑定触屏事件阻止默认行为：

<template>
  <div
    unselectable="on"
    onselectstart="return false;"
    v-touch:touchhold="peek"
    <!-- 替换原来的onmousedown，阻止触屏触发默认选中逻辑 -->
    @touchstart.prevent
    class="tw-select-none">
    <slot name="activator"></slot>
  </div>
</template>

3. 触发长按后主动清除选中兜底

如果还是偶发选中弹窗，可以在你的peek方法开头加一行代码，主动清空系统已选中的内容，直接阻断弹窗弹出：

const peek = () => {
  // 主动清除所有选中内容，兜底阻断系统弹窗
  window.getSelection()?.removeAllRanges()
  // 剩下的原有逻辑（震动、展示预览等）
}

4. 阈值调整优化（可选）

vue-touch-events的touchhold默认触发延迟是500ms，iOS系统长按选中文本的默认触发阈值约为450-500ms，你可以把touchhold的触发延迟调低到350ms，让你的业务逻辑先于系统选中逻辑触发，从时序上避免冲突。

内容的提问来源于stack exchange，提问作者Ryan H