-webkit-touch-callout 是 webkit 内核专有 css 属性，仅在 ios safari（及部分旧版 android webview）中有效，用于禁用长按元素时弹出的系统默认菜单（如“复制”“搜索”），它不被 chrome、firefox、edge 等现代浏览器识别；其生效需配合 -webkit-user-select: none 和 user-select: none，且受父级继承、伪元素、动态渲染等因素影响，在 ios 新版本中可靠性下降，属弱约束信号。
webkit-touch-callout 是什么，为什么它只在 iOS Safari 有效
webkit-touch-callout 是一个 WebKit 内核专有 CSS 属性，用于控制 iOS Safari（及部分旧版 Android WebView）中长按文本或图片时是否弹出系统默认菜单（如“复制”“搜索”“翻译”等）。它对 Chrome、Firefox、Edge 等现代桌面/安卓浏览器完全无效——这些浏览器根本不识别该属性。
- 它仅作用于可被选中、可触发长按交互的元素（如
p、img、span） - 设置为
none可禁用菜单，但不会阻止文字选中本身（选中仍可能发生，只是不弹菜单） - 在 iOS 15.4+ 中，即使设为
none，部分场景（如长按链接）仍可能触发跳转或上下文菜单，属系统级行为，CSS 无法覆盖
怎么写才真正生效：必须配合 user-select 和 -webkit-user-select
单靠 webkit-touch-callout: none 很容易失效，尤其在 iOS 新版本中。真实生效需组合以下三项：
webkit-touch-callout: none-
-webkit-user-select: none（WebKit 专属，禁用选中） -
user-select: none（标准属性，覆盖其他浏览器）
.no-callout {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
注意：-webkit-user-select: none 会同时阻止长按触发菜单和手动双击/拖拽选中文本；若你只想禁菜单但保留选中能力，webkit-touch-callout: none 单独用即可，但要接受它在某些 iOS 场景下不可靠。
常见失效原因：父元素继承、伪元素干扰、React/Vue 动态渲染
实际项目中常遇到“写了却没用”，多半是以下情况：
- 父容器设置了
user-select: text或未设user-select，子元素的none被继承链覆盖 - 使用了
::before/::after伪元素且内容可交互（比如插入了content: "..."的空格或符号），iOS 会把伪元素区域也纳入长按判定范围 - React/Vue 中动态添加的节点（如弹窗、懒加载内容）未应用该样式，需确保 class 在挂载时已存在或通过
style内联设置
替代方案：监听 touchstart + preventDefault 需谨慎使用
如果 CSS 方案始终不稳定（比如要彻底禁掉长按所有行为），可考虑 JS 拦截：
- 监听
touchstart并调用event.preventDefault()，但会导致滚动失效、input 失焦、甚至页面卡顿 - 更稳妥的是只在非输入控件上绑定，且加
{ passive: false }：element.addEventListener('touchstart', (e) => { if (!e.target.matches('input, textarea, select')) { e.preventDefault(); } }, { passive: false });
但要注意：iOS 16+ 对 preventDefault 在非滚动区域的限制更严，频繁调用可能被浏览器忽略或报 warning。
移动端长按行为受系统、浏览器版本、元素语义多重影响，webkit-touch-callout 不是开关，而是一个弱约束信号——真正可靠的控制，往往得靠组合 CSS + 语义化 HTML（比如用 div 替代 p 包裹纯展示文本）+ 必要时轻量 JS 补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
