如何禁用iPadOS15/iOS15 Safari中长按HTML元素触发的文本放大镜

iOS15调整了Safari内核的手势触发逻辑，旧版禁用方案已经失效，可使用以下方案实现禁用：

1. 推荐CSS方案 #

直接给需要禁用的元素或全局添加以下样式即可生效：

* {
  /* 禁止文本选中，基础配置 */
  -webkit-user-select: none;
  user-select: none;
  /* 禁止长按弹出系统默认菜单 */
  -webkit-touch-callout: none;
  /* iOS15+ 专属属性，专门用于禁用文本放大镜 */
  -webkit-text-zoom: disable;
}

如果有部分区域需要保留文本选中功能，单独给对应区域覆盖样式即可：

.allow-text-select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-text-zoom: auto;
  -webkit-touch-callout: default;
}

需要单独排除输入类元素，避免影响正常输入功能：

input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-text-zoom: auto;
  -webkit-touch-callout: default;
}

2. 兼容JS方案 #

如果部分特殊场景CSS方案不生效，可以配合JS拦截长按事件实现：

let longPressTimer = null
// 监听触摸开始判断长按
document.addEventListener('touchstart', (e) => {
  longPressTimer = setTimeout(() => {
    e.preventDefault()
  }, 350) // 长按触发阈值可自行调整
}, { passive: false })

// 触摸结束清除定时器
document.addEventListener('touchend', () => {
  clearTimeout(longPressTimer)
})

// 触摸移动取消定时器
document.addEventListener('touchmove', () => {
  clearTimeout(longPressTimer)
})

内容的提问来源于stack exchange，提问作者Takabasi Syu