仅靠user-select:none无法禁用长按菜单，因其仅阻止文本选中，不干预系统级上下文菜单；需组合-webkit-touch-callout:none（ios关键）与全前缀user-select声明，并在微信等定制内核中辅以touchstart.preventdefault()兜底。
仅靠 user-select: none 无法真正禁止长按弹出菜单，它只阻止文本被选中，不影响系统级上下文菜单（如“复制”“搜索”“翻译”）的触发。
为什么 user-select: none 看起来没用
浏览器把「长按选中文本」和「长按唤出系统菜单」当成两件事处理：user-select: none 只干预前者。iOS Safari 和 Android Chrome 在长按时会独立检测可交互内容（哪怕文字不可选），仍可能弹出菜单。
- 现象：加了
select-none或user-select: none，但长按图片、链接、带文字的<span></span>还是弹窗 - 原因：菜单触发依赖的是元素类型和触摸区域语义，不是
user-select值 - 特别注意：
<input>、<textarea></textarea>、contenteditable元素上设user-select: none会被忽略——这是浏览器强制行为，不是 bug
-webkit-touch-callout: none 才是 iOS 禁菜单的关键
这个属性专为 iOS WebKit 内核设计，控制长按时是否显示原生呼叫菜单（callout），对图片、链接、文字块都生效。Android 不识别它，但加了也无害。
- 必须和
user-select: none配合使用，单独写无效 - 只在 iOS Safari 及所有基于 WebKit 的 iOS 内置浏览器（微信、钉钉、企业微信等）起作用
- Tailwind 用户需手动加：
[-webkit-touch-callout:none]（启用 JIT 模式才支持） - 别写成
-webkit-touch-callout: disable—— 合法值只有none或default
跨平台真正生效的最小 CSS 组合
要覆盖 iOS、Android、PC 触控设备，得把各引擎前缀打全，且顺序不能错（后声明的优先级更高）：
.prevent-longpress {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
-
-webkit-touch-callout: none必须放在第一行，否则某些 iOS WebView 会忽略 -
-webkit-user-select要早于标准user-select，避免旧版 Safari 读不到 - 不要全局写
* { ... }—— 会误伤<input>的光标定位和可编辑区域 - 如果用了
pointer-events: none，记得它会同时禁掉点击，不是“仅禁长按”
微信 WebView 等定制内核必须加 JS 兜底
微信 X5、QQ 浏览器、部分安卓厂商 WebView 对 CSS 支持不稳定，-webkit-touch-callout 常被无视。此时只能监听事件拦截：
element.addEventListener('touchstart', e => {
if (!e.target.matches('input, textarea, select, [contenteditable]')) {
e.preventDefault();
}
});
- 只针对明确不需要长按交互的容器（如卡片标题、图标旁文字），别绑到
body -
e.preventDefault()会同时阻止默认滚动，所以不能滥用在可滚动区域 - 更轻量的替代：监听
contextmenu事件（但移动端触发率低，不如touchstart可靠） - 若页面有「点击复制 token」按钮，务必给该按钮显式重置：
user-select: text，否则用户点不动
最常被忽略的一点：禁用长按菜单不等于禁用交互。CSS 层面能做到的只是降低系统菜单触发概率，而非绝对拦截；是否真要“彻底禁用”，得看目标场景——展示型文案可用纯 CSS，表单类或高交互区域，必须留出可编辑出口，否则 Accessibility 和实际可用性都会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
