iOS15及以上版本Safari浏览器网页长按如何禁止弹出小矩形放大镜

iOS 15对触摸交互的默认触发逻辑做了调整，原有仅靠-webkit-user-select: none、-webkit-touch-callout: none和全局touch事件拦截的方案已经失效，可通过以下组合方案修复：

1. CSS 补充适配 #

在原有样式基础上补充全局禁用规则，同时排除输入类元素避免影响正常输入功能：

*:not(input, textarea) {
  /* 原有规则 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* 新增iOS15适配规则 */
  -webkit-tap-highlight-color: transparent;
}

2. JS 交互拦截调整 #

原有全局touch事件调用preventDefault会导致滚动、点击等正常交互失效，调整为拦截长按触发的上下文菜单事件，同时可补充触摸时长判断拦截长按逻辑：

// 拦截上下文菜单事件，阻止放大镜触发
document.addEventListener('contextmenu', e => {
  // 排除输入框
  if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;
  e.preventDefault();
});

// 补充触摸时长判断，超过300ms的触摸事件阻止默认行为
let touchStartTime = 0;
document.addEventListener('touchstart', e => {
  touchStartTime = Date.now();
});
document.addEventListener('touchend', e => {
  if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;
  const touchDuration = Date.now() - touchStartTime;
  if (touchDuration > 300) {
    e.preventDefault();
  }
});

内容的提问来源于stack exchange，提问作者Geetanshu Gulati