user-select: none 不能真正防移动端误触，因它不阻止点击穿透、长按菜单或光标闪动，且损害可访问性和表单交互；应按场景选用 touch-action: pan-y、-webkit-touch-callout: none 等组合方案。
user-select: none 确实能阻止文本被选中，但在移动端网页中直接用它防“误触”是错的路子——它不解决点击穿透、光标闪动、长按呼出菜单等问题，反而可能让可访问性（a11y）和表单交互崩掉。
为什么 user-select: none 在移动端常失效或引发新问题
移动端浏览器（尤其是 iOS Safari 和 Android Chrome）对 user-select 的实现有差异：iOS 会忽略它对 <input>、<textarea></textarea> 和焦点元素的限制；Android 部分版本在长按后仍可触发文字选择菜单。更关键的是，这个属性只禁“选中”，不阻止 touchstart、click 或默认的长按行为。
- 加了
user-select: none后，<input type="text">依然能聚焦、弹键盘 - 配合
pointer-events: none会直接让按钮/链接失活，不是“防误触”，是“防使用” - 屏幕阅读器可能跳过被设为
user-select: none的文本，影响无障碍
真正要防的是什么？先区分场景再动手
所谓“误触”，实际是三类不同问题，得用不同手段：
-
列表项滑动时意外触发点击 → 用
touch-action: pan-y锁定仅允许纵向滚动，禁止触发click -
长按弹出系统菜单（复制/搜索/翻译） → 除了
user-select: none，还得加-webkit-touch-callout: none和contextmenu事件拦截 -
输入框外区域被误选中干扰光标定位 → 只对非交互容器（如
<div class="card">）设 <code>user-select: none，保留<label></label>、<button></button>等原生语义元素的可选性最小可行组合：防长按 + 防滑动误点
以下 CSS 是目前在 iOS 16+ 和 Android 12+ 上稳定生效的轻量组合，不破坏表单、不伤 a11y：
立即学习“前端免费学习笔记（深入）”；
.no-touch-accident { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }-
touch-action: pan-y是核心：告诉浏览器“这个区域只允许上下拖，别拿它当点击目标” -
-webkit-touch-callout: none专治 iOS 长按时那个讨厌的气泡菜单 - 四个
user-select前缀缺一不可，Android Chrome 旧版只认-webkit-，Firefox 仍需-moz- - 别全局写
* { user-select: none }—— 这会让所有<pre class="brush:php;toolbar:false;"></pre>代码块无法复制，用户会骂人
复杂点在于：没有一刀切的“禁选中=防误触”。你得看具体元素是否需要响应触摸、是否含可编辑内容、是否被读屏软件读取。加样式前，先用 Safari Web Inspector 或 Chrome Remote Debug 真机连一下，长按、滑动、双击都试一遍——很多问题只在真机上露馅。
-
