user-select: none 单独使用无效，因它仅阻止文本高亮，不抑制系统级长按菜单；需配合 -webkit-touch-callout: none（ios关键）及全前缀 user-select，并在微信安卓x5内核中加 js 拦截 touchstart 和 contextmenu 事件。
只写 user-select: none 基本无效，必须组合 -webkit-touch-callout: none + 全前缀 user-select，并在微信安卓等定制内核中加 JS 拦截才可能生效。
为什么 user-select: none 单独写没用
它只阻止文本高亮选中，不干预系统级长按菜单（如“复制”“保存图片”）。iOS 会独立检测可交互内容，哪怕文字不可选，仍可能弹窗；Android Chrome 和微信 X5 内核则基本忽略该声明。常见现象是：加了 user-select: none，但长按图片、链接或带文字的 <span></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 会忽略；也不能加在 或 * 上——会影响跳转逻辑，比如微信里“在浏览器打开”就失效。
微信安卓 X5 内核必须加 JS 拦截
腾讯 X5 内核对 CSS 属性支持极不稳定，-webkit-touch-callout 基本被无视，user-select 在动态插入内容（如 Vue/React 弹窗）中也容易漏掉。此时需绑定 touchstart 并调用 e.preventDefault()，但要注意：
- 不能全局监听
document或，否则滚动、输入框聚焦都会异常 - 只针对明确不需要长按交互的元素（如卡片标题、图标文案），排除
<input>、<textarea></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></span> 或 ::before 里，依然可选。微信安卓 WebView 对纯空节点（仅含空白符或换行）常跳过判断，导致样式不生效。
检查 computed styles，确认目标文字节点上 user-select 确实是 none；若用 ::before/::after 插入文字，需单独加 user-select: none；动态渲染的内容（如 Vue v-if、React useState）必须确保 class 在挂载时已存在或通过 style 内联设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
