只写 user-select: none 没用，因为它仅阻止文本高亮选中，不干预系统级长按菜单；iOS 仍可能弹出“复制”等气泡，Android Chrome 和微信 X5 内核基本忽略该声明。
为什么只写 user-select: none 没用
它只阻止文本高亮选中，不干预系统级长按菜单（如“复制”“保存图片”）。iOS 会独立检测可交互内容，哪怕文字不可选，仍可能弹窗；Android Chrome 和微信 X5 内核则基本忽略该声明。常见现象是：加了 user-select: none，但长按图片、链接或带文字的 span 还是弹出菜单。
-webkit-touch-callout: none 必须和 user-select 共存
这个属性是 iOS Safari 和所有 WebKit 内核 iOS WebView（微信、钉钉、企业微信）禁菜单的关键开关，但它在 Android 和桌面浏览器中完全无效。单独使用在 iOS 13+ 和微信 X5 中也常失效，必须与全前缀 user-select 同时作用于同一元素：
.no-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 会忽略；也不能加在 body 或 * 上——会影响 <a href></a> 的跳转逻辑，比如微信里“在浏览器打开”就失效。
微信安卓 X5 内核必须加 JS 拦截
腾讯 X5 内核对 CSS 属性支持极不稳定，-webkit-touch-callout 基本被无视，user-select 在动态插入内容（如 Vue/React 弹窗）中也容易漏掉。此时需绑定 touchstart 并调用 e.preventDefault()，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 不能全局监听
document或body，否则滚动、输入框聚焦都会异常 - 只针对明确不需要长按交互的元素（如卡片标题、图标文案），排除
input、textarea、contenteditable - 必须同时监听
contextmenu，防止非 WebKit 浏览器触发右键菜单
示例代码片段：
const el = document.querySelector('.tap-safe');
el.addEventListener('touchstart', e => e.preventDefault());
el.addEventListener('contextmenu', e => e.preventDefault());
伪元素、空节点和动态内容容易漏掉
user-select 不继承，所以给父容器设了 none，但文字在子级 span 或 ::before 里，依然可选。微信安卓 WebView 对纯空节点（仅含空白符或换行）常跳过判断，导致样式不生效。
- 检查 computed styles，确认目标文字节点上
user-select确实是none - 若用
::before/::after插入文字，需单独加user-select: none - 空元素建议加
min-height: 1em或占位字符（如 - React/Vue 动态渲染的内容，确保 class 在挂载时已存在，或用
style内联设置
真正可靠的方案不是“禁用”，而是把敏感图片改用 background-image 渲染，或由后端控制资源可访问性——CSS 和 JS 都只能提高保存门槛，无法替代服务端权限控制。
