user-select: none 单独使用在移动端基本无效，因浏览器将文本高亮与长按菜单分为两套机制：ios 需配合 -webkit-touch-callout: none，安卓微信 x5 内核需 js 的 touchstart + preventdefault() 补防，firefox android 依赖 -moz-user-select。
单独写 user-select: none 在移动端基本无效——iOS 仍弹“复制”菜单，安卓微信 X5 内核直接忽略，Firefox for Android 可能不响应。必须组合多前缀 + 额外声明 + JS 补防。
为什么 user-select: none 单独写总是失效
根本不是语法错，而是浏览器把“文本能否被高亮”和“长按是否唤出系统菜单”拆成两套机制处理：
- iOS Safari：仅
user-select: none能压住文字高亮，但-webkit-touch-callout: none才控制气泡菜单是否弹出 - 安卓微信（X5 内核）：几乎无视所有 CSS 选中控制属性，
user-select和-webkit-touch-callout基本不生效 - Firefox for Android：仍依赖
-moz-user-select: none，标准属性在 ≤68 版本里不认 - 元素类型强制覆盖：对
<input>、<textarea></textarea>、contenteditable="true"元素，浏览器直接忽略该样式
-webkit-touch-callout: none 必须放在第一行且作用于具体元素
这个声明只对 iOS Safari 和部分 WebView 有效，Android 浏览器完全忽略它。但它不是可选补丁，是 iOS 禁用长按菜单的刚性条件：
- 必须写在 CSS 声明块最顶部，否则某些 iOS WebView（如企业内嵌页）会跳过解析
- 不能加在
body或*上——会影响链接长按“在浏览器打开”等关键交互 - 必须和
user-select: none同时作用于**同一元素**，比如：.no-longpress { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - 如果目标是按钮文字，但文字包在
<span></span>里，只给<button></button>加没用，得显式作用到<span></span>
安卓微信 X5 内核必须用 touchstart + preventDefault() 补防
CSS 在 X5 内核里可靠性极低，尤其动态插入内容（Vue/React 弹窗、懒加载模块）容易漏掉样式。此时需 JS 干预，但要注意边界：
- 监听
touchstart，不是longpress（后者非标准事件） - 只拦截非表单区域：
element.addEventListener('touchstart', e => { if (!e.target.matches('input, textarea, select, [contenteditable]')) { e.preventDefault(); } }); - 绝对不要绑定到
document.body或document——会阻断页面滚动和链接跳转 - 若用 Vue/React，确保事件监听器随组件卸载而移除，避免内存泄漏
哪些地方加了也白加，甚至破坏交互
强行给某些元素加 user-select: none 不仅无效，还会引发意料外问题：
-
<input type="text">和<textarea></textarea>：浏览器强制允许选择，加了反而干扰光标定位和输入法联动 -
contenteditable="true"：编辑优先级高于 CSS，禁用后富文本光标失灵、粘贴异常 -
<img>的alt文本：iOS 长按时仍可高亮，得设alt=""或改用背景图 - 带
tabindex="0"或role="button"的容器：Android Chrome 可能允许双击选中，得额外加pointer-events: none（但注意这也会禁点击） - Shadow DOM 外部样式无法穿透：Web Components 内必须在 shadow root 里单独声明
真正难的不是写对那一行 CSS，而是判断「这段文字到底该不该被选中」——是展示型内容？可编辑区域？还是需要键盘导航的语义化控件？漏掉其中一环，用户在某个机型上就一定会遇到意外行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
