仅靠 user-select: none 无法彻底禁用移动端长按菜单，必须组合 -webkit-touch-callout: none + 显式作用于文字承载元素 + 针对 webview 特殊处理（如微信安卓 x5 内核）。
直接结论：仅靠 user-select: none 无法彻底禁用移动端长按菜单，必须组合 -webkit-touch-callout: none + 显式作用于文字承载元素 + 针对 WebView 特殊处理（如微信安卓 X5 内核）。
为什么 user-select: none 单独写经常失效
失效不是代码写错，而是浏览器行为分层导致的——user-select 只管“能否选中文本”，不管“长按是否唤起系统菜单”。iOS 上 -webkit-touch-callout 才是控制菜单弹出的关键开关；安卓微信 X5 内核则基本忽略该属性，只认 user-select + 事件拦截。
- 只给父容器设
user-select: none，但子<span></span>或伪元素::before里有文字 → 文字仍可被选中 - 用了
!important的第三方样式（如 Vue scoped style、Ant Design）覆盖了你的规则 → 检查 computed styles 中实际值 - 元素为空或仅含空白符（
user-select判断 → 加min-height: 1em或内容占位 -
contenteditable="true"属性优先级高于user-select，即使设为none也无效 → 必须显式移除或设为false
-webkit-touch-callout: none 是 iOS 的关键开关
这个属性专为 iOS Safari 设计，控制长按时是否弹出“复制/搜索/翻译”气泡菜单。它和 user-select 是互补关系：user-select: none 让文字无法高亮，-webkit-touch-callout: none 让系统菜单不出现。两者缺一不可。
- 仅在 iOS 有效，Android 浏览器（包括 Chrome）完全忽略该声明
- 必须和
user-select: none同时作用于同一元素，否则 iOS 下仍可能触发菜单 - 不要加在
或全局*上——会影响<a></a>标签的长按跳转逻辑（如微信内“在浏览器打开”） - 示例写法：
.tap-safe { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
安卓微信（X5 内核）必须加 JS 拦截
微信安卓版使用腾讯 X5 内核，对 CSS 属性支持极不稳定。-webkit-touch-callout 基本无效，user-select: none 在部分场景也会被绕过。此时必须用 JavaScript 补防。
- 监听
touchstart并调用e.preventDefault()，但注意：不能无差别绑定到body，否则会阻断页面滚动 - 只针对明确不需要长按交互的区域（如卡片标题、图标文字、按钮文案），且排除表单控件：
element.addEventListener('touchstart', e => { if (!e.target.matches('input, textarea, select, [contenteditable]')) { e.preventDefault(); } }); - 微信还可能触发
contextmenu事件（尤其图片、链接），需额外监听并preventDefault() - 避免用
pointer-events: none—— 它会同时禁掉click和touchstart，破坏所有交互
容易被忽略的继承与重置陷阱
user-select 具有继承性，一旦父级设为 none，所有子元素默认也无法选中。这在表单区域极易翻车。
-
<input>、<textarea></textarea>本身会忽略user-select: none，这是预期行为，无需强行覆盖 - 但若父容器设了
user-select: none，而子<button></button>内含<span></span>文字，那段文字仍会被继承禁用 → 需单独给button span重置：user-select: auto - Shadow DOM 或 Web Component 中，
user-select不会穿透作用域 → 必须在::slotted或:host内显式声明 - 伪元素（
::before/::after）不继承user-select→ 若用其生成文字，必须单独加声明
真正难搞的不是写哪几行 CSS，而是得确认那个节点在 iOS 里是否被浏览器识别为“可选文本区域”——有时候删掉 tabindex="-1" 或加个 outline: 0 就能破局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
