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