根本原因是浏览器默认启用长按文本选择，由user-select初始值决定；需结合user-select: none、-webkit前缀、touchstart拦截及针对性重置才能可靠禁用。
长按触发系统菜单的根本原因
移动端浏览器（尤其是 iOS Safari 和 Android Chrome）默认会对可选中文本做长按响应，触发复制/搜索/翻译等原生菜单。这不是 bug，而是系统级交互策略——只要文本可选，长按就可能唤起菜单。
关键判断点：user-select: none 能阻止文本被选中，从而切断长按菜单的触发链，但它不阻止所有长按行为（比如图片长按仍可能保存），也不影响点击事件。
为什么只设 user-select: none 有时无效
常见失效场景有三个：
- 未覆盖全部目标元素：只给外层容器设了
user-select: none，但内部p、span、div等子元素有独立样式或继承中断 - 被更高优先级样式覆盖：比如组件库或框架（如 Vue 的 scoped style、React Native Web）插入了带
!important的user-select: text - CSS 作用域问题：在 Shadow DOM 或某些 Web Component 中，样式未穿透到内部节点
实操建议：用浏览器开发者工具检查实际生效的 user-select 值；对关键文本容器及其直接子元素显式声明：
立即学习“前端免费学习笔记（深入）”；
.no-select {
user-select: none;
}
.no-select * {
user-select: none;
}兼容性与副作用必须知道的细节
user-select 在移动端主流浏览器中支持良好（iOS 9.3+、Android 4.4+），但要注意：
- 旧版 Android WebView（-webkit-user-select: none 前缀（现代环境已非必需，但留着无害）
- 设为
none后，用户无法再手动复制该区域文本——如果页面有「点击复制 token」之类功能，要单独给按钮恢复user-select: text - 部分输入框（
input、textarea）会忽略user-select: none，这是预期行为，无需强行覆盖
比单纯禁用更稳妥的组合策略
仅靠 user-select 不能 100% 拦截所有长按菜单（例如图片、链接仍可能触发）。更完整的做法是分层控制：
- 文本内容：用
user-select: none+ 确保父容器无touch-callout: default - 图片和链接：添加
-webkit-touch-callout: none（iOS 专属，禁用长按弹出菜单） - 全局防误触：对非交互区域加
pointer-events: none（慎用，会禁用所有事件）
推荐最小可行样式块：
.prevent-longpress {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}复杂点在于：有些业务需要局部可复制（比如代码块），又得全局防菜单。这时候不能一刀切，得用 class 分离逻辑，而不是全站挂 user-select: none 到 body。
