user-select无效时需分场景处理：老浏览器因引擎缺失特性而完全不支持；ie/edge legacy可用onselectstart阻止；移动端需touchstart+preventdefault；终极方案是contenteditable="false"+pointer-events:none。
user-select 无效时，先确认是不是浏览器根本不支持
IE9 及更早版本、Android 4.3 以下 WebView、部分老旧 Electron 内核（如 v1.8.x）压根不解析 user-select，连带所有前缀都无效。这不是写法问题，是引擎缺失该特性。遇到这类环境，CSS 方案直接归零，必须换路。
用 onselectstart 事件阻止选择（仅限 IE/Edge Legacy）
IE10–11 和旧版 Edge 支持 onselectstart，但现代 Chrome/Firefox/Safari 已废弃该事件，所以它只适合兜底老 IE 场景。
- 给目标元素加
onselectstart="return false;"，或在 JS 中绑定：element.onselectstart = () => false; - 注意：该事件不冒泡，需为每个需禁选的元素单独绑定，不能靠父级委托
- 若元素是动态插入的（如 React 渲染后），得在 DOM 插入后立即绑定，否则无效
移动端长按仍弹“复制”菜单？单靠 CSS 不够
iOS Safari 和部分 Android WebView 中，即使 -webkit-user-select: none 生效，长按仍可能触发系统菜单。这不是 bug，是 WebKit 的行为优先级设计——用户意图（长按）高于样式声明。
- 必须配合
touchstart阻止默认行为：element.addEventListener('touchstart', e => e.preventDefault(), { passive: false }); - 但
passive: false会禁用滚动，所以只对非滚动区域（如按钮、标签、卡片标题）启用 - 别对
<input>或contenteditable元素加这个，否则输入框无法聚焦
真正兼容的 fallback：用 readonly + pointer-events: none 模拟禁选
当 CSS 和事件都不可靠时，退回到语义层控制：把文本容器换成不可编辑、不可交互的结构，再视觉模拟原样。
- 把
<p>ID: 12345</p>改成<div contenteditable="false" tabindex="-1">ID: 12345</div>，并设pointer-events: none; -
contenteditable="false"在所有浏览器中都能阻止光标进入和文本选择（包括 IE8+） -
pointer-events: none需注意：它会让点击失效，所以得额外加tabindex="-1"保键盘可聚焦，必要时用 JS 拦截click事件模拟交互
最麻烦的不是加哪行代码，而是判断「这个文字到底该不该被选中」——比如错误提示里的 code 片段，用户需要复制调试，禁了反而增加排查成本。别让兼容性方案掩盖真实需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
