移动端长按触发 user-select: text 会导致非预期文字高亮和系统菜单弹出，需通过 .no-select 类精准禁用并排除表单控件；避免全局重置影响输入，禁用后需为代码块等特殊区域恢复可选能力。
移动端长按触发 user-select: text 导致意外高亮和菜单弹出
长按文本时系统默认进入“选择模式”，会高亮文字、拉出复制/搜索菜单，但很多交互区域（比如按钮、卡片、滑动容器）根本不需要这个行为。尤其当 user-select 被继承或重置不彻底时，子元素仍可能响应长按——这不是 bug，是浏览器对可选文本的默认尊重。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局禁用前先确认范围：
* { -webkit-user-select: none; user-select: none; }看似省事，但会让<input>、<textarea></textarea>无法输入，必须排除表单控件 - 更稳妥的做法是只对非编辑区域设防：给容器加
class="no-select"，再写.no-select { -webkit-user-select: none; user-select: none; } - 注意 Safari 15.4+ 对
user-select: none的处理更严格，但旧版 iOS WebKit 仍可能在position: fixed元素上失效，需配合-webkit-tap-highlight-color: transparent
touchstart + preventDefault() 拦截长按却破坏滚动
有人用 touchstart 直接 preventDefault() 来阻止长按选中，结果发现整个区域不能滚动了——因为浏览器把 touch 事件流当作滚动信号的一部分，粗暴拦截等于关掉了滚动入口。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要在根容器上无差别调用
preventDefault()，尤其别绑定在document或body - 如果真要拦截（比如自定义长按菜单），只在明确非滚动区的元素上监听，且仅对
touchstart做轻量判断：if (e.touches.length === 1) { e.preventDefault(); }，并立刻清除定时器避免干扰后续手势 - 滚动容器（如
overflow-y: scroll）务必保留原生 touch 行为，可通过touch-action: pan-y显式声明允许纵向滚动，同时禁止缩放/横向拖拽
iOS 上 ::-webkit-text-selection 样式完全不生效
想用 ::-webkit-text-selection { background: #007aff; } 统一选中色？在 iOS Safari 里大概率白写——它根本不支持该伪类，连 color 都会被忽略，只认系统级选中色（蓝底白字，不可改）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃用 CSS 覆盖 iOS 选中样式，这是平台限制，不是你写法错
- 若需视觉一致性，可考虑禁用选中后，用 JS 模拟选中态（例如点击时给元素加
class="selected"并配对应背景），但要注意与键盘焦点、无障碍阅读器的兼容性 - Android Chrome 和新版 Edge 支持
::selection（无前缀），可放心用；iOS 则只能靠user-select: none彻底规避
第三方组件（如 Vue Draggable、Swiper）内部文本被意外选中
这些库本身没开 user-select，但它们的模板里常含 <span></span>、<p></p> 等天然可选标签，一旦父层未显式关闭，长按就触发选中，干扰拖拽或轮播操作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在组件外层容器加
class="no-select"，比在组件内部 patch 更可靠 - 检查组件文档是否提供
selectable: false类似配置项（如 Swiper 的allowTouchMove不影响选中，但某些版本支持disableSelection） - 若用 Vue/React，可在组件根节点直接写内联样式：
style={{ WebkitUserSelect: 'none', userSelect: 'none' }}，避免 CSS 优先级冲突
最麻烦的不是禁用选中，而是禁用之后还要让输入框、可编辑区域、代码块等少数地方“复活”可选能力——得靠精确的 CSS 层叠或 JS 动态控制，漏掉一个 <pre class="brush:php;toolbar:false;"><code></code> 就可能让用户复制不了示例代码。</pre>
