仅靠 user-select: none 无法真正禁用长按弹出菜单，必须组合 -webkit-touch-callout: none、全前缀 user-select 声明，并在微信等定制 webview 中加 js 拦截才可能生效。
仅靠 user-select: none 无法真正禁用长按弹出菜单，它只阻止文本被选中，不干预系统级上下文菜单（如“复制”“搜索”“保存图片”）的触发。必须组合 -webkit-touch-callout: none + 全前缀 user-select 声明，并在微信等定制 WebView 中加 JS 拦截才可能生效。
为什么 user-select: none 单独写没用
浏览器把「长按选中文本」和「长按唤出系统菜单」当成两件事处理：user-select: none 只干预前者。iOS Safari 和 Android Chrome 在长按时会独立检测可交互内容（哪怕文字不可选），仍可能弹出菜单。
- 现象：加了
select-none或user-select: none，但长按图片、链接、带文字的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 内置浏览器（微信、钉钉、企业微信等）起作用
- 值只能是
none或default，别写成-webkit-touch-callout: disable -
-webkit-touch-callout: none必须放在 CSS 声明的第一行，否则某些 iOS WebView 会忽略
跨平台真正生效的最小 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;
}
- 不要全局写
* { ... }—— 会误伤<input>的光标定位和可编辑区域 - 若用了
pointer-events: none，记得它会同时禁掉点击，不是“仅禁长按” - Tailwind 用户需手动加
[--webkit-touch-callout:none]（启用 JIT 模式才支持）
微信 WebView 等定制内核必须加 JS 兜底
微信 X5、QQ 浏览器、部分安卓厂商 WebView 对 CSS 支持不稳定，-webkit-touch-callout 常被无视。
- 给目标元素绑定
touchstart并调用e.preventDefault()，但不要在上全局监听，否则滚动、输入框聚焦都会异常 - 同时监听
contextmenu事件（对右键/长按生效） - 排除表单控件：
if (!e.target.matches('input, textarea, select')) { e.preventDefault(); } - 所有前端手段都无法阻止截图、录屏、DevTools 查看 network 或 elements 面板抓图——只能提高保存门槛，不能替代服务端权限控制
最常被忽略的是：CSS 层面能做到的只是「降低触发概率」，不是「绝对禁用」；而微信安卓 X5 内核基本无视 -webkit-touch-callout，此时 JS 拦截才是唯一可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
