iOS Safari 26.1中-webkit-touch-callout: none失效问题求助

问题背景确认 #

确实有大量开发者遇到过这个问题：iOS Safari 15及以上版本中，-webkit-touch-callout: none属性对可选中的文本不再生效，长按仍然会弹出系统上下文菜单。这是WebKit的有意设计改动，目的是优先保障用户的文本选择、复制等基础交互体验，该属性现在仅对非可选择的元素（比如设置了user-select: none的元素）生效。

替代方案 #

根据不同的业务需求，可选择以下方案：

1. 完全禁用文本选择（简单直接）
   如果你的页面不需要用户选中任何文本，可以结合user-select系列属性，彻底阻止文本选择和长按菜单：

html, body {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

2. 保留文本选择，仅阻止长按菜单（精细控制）
   如果需要保留文本选择能力，只屏蔽长按弹出的菜单，可以通过JavaScript监听触摸事件，判断长按行为后阻止默认操作：

let longPressTimer;

// 监听触摸开始事件
document.addEventListener('touchstart', (e) => {
  // 仅针对需要处理的文本元素，可自定义选择器缩小范围
  const target = e.target;
  if (['P', 'DIV', 'SPAN'].includes(target.tagName)) {
    // 设置定时器，匹配iOS默认长按触发阈值（约500ms）
    longPressTimer = setTimeout(() => {
      e.preventDefault();
    }, 500);
  }
});

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

注意：这种方式可能会影响其他触摸交互（如滚动），建议严格限制作用的元素范围。

3. 针对非交互元素的极简方案
   如果目标元素不需要响应任何触摸交互（如纯展示文本），可以使用pointer-events禁用所有交互：

.your-target-element {
  pointer-events: none;
}

此方案会让元素完全失去交互能力，需根据场景谨慎使用。

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