HTML5中无userselect属性，应使用CSS的user-select属性禁用文字选中，需添加多浏览器前缀，且对表单控件需额外处理；onselectstart和unselectable为IE旧方案，不推荐使用。
HTML5 中没有 userselect 属性，真正起作用的是 CSS 的 user-select 属性。 它不是 HTML 属性，不能写在标签里如 <div userselect="none"> —— 这样写完全无效，浏览器会忽略。
用 user-select 禁止文字选中（CSS 方式）
必须通过 CSS 设置，支持主流浏览器（Chrome 54+、Firefox 69+、Safari 3.1+、Edge 12+），IE 用旧版 -ms-user-select。
-
user-select: none：彻底禁用用户选中，包括鼠标拖拽、双击、三击、Ctrl+A 都无效 - 它只影响“用户主动触发”的选中行为，不影响 JS 脚本调用
window.getSelection()或document.execCommand('selectAll') - 对表单控件（
<input>、<textarea>）默认不生效，需额外加pointer-events: none或用readonly控制
/* 禁用某段文字选中 */
.no-select {
user-select: none;
-webkit-user-select: none; /* Safari 和旧版 Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
<p>/<em> 应用到元素 </em>/
<p class="no-select">这段文字无法被选中</p>为什么 onselectstart 和 unselectable 不推荐
这两个是 IE 时代的遗留方案，现代开发应避免：
-
onselectstart是 DOM 事件，仅 IE 和旧版 Edge 支持，Chrome/Firefox 完全不触发 -
unselectable="on"是 IE 专有 HTML 属性，仅对 IE6–10 有效，且只作用于元素自身，子元素仍可被选中（除非全部递归加） - 两者都无法阻止键盘 Ctrl+A 全选，也不影响右键「复制」菜单的可用性
常见误用场景与修复建议
实际项目中容易踩坑的地方：
立即学习“前端免费学习笔记（深入）”；
- 在按钮或图标上加
user-select: none后，发现点击反馈变弱 → 实际是误加了pointer-events: none，二者无关，别混用 - React/Vue 中动态切换选中状态，直接改内联 style 时漏掉前缀 → 推荐用 CSS 类切换，或用
styled-components/css-in-js自动注入前缀 - 禁用选中后，无障碍访问（如屏幕阅读器）可能受影响 → 若该区域含重要文本，考虑保留选中能力，或用
aria-live等补充语义 - 移动端 Safari 对
user-select: none响应较慢，长按仍可能唤出菜单 → 可加-webkit-touch-callout: none抑制右键菜单
真正要禁用选中，就老实用 user-select: none 配全浏览器前缀；别指望 HTML 属性或事件监听能跨浏览器兜底。兼容性细节和移动端响应延迟，是最容易被忽略的实际复杂点。
