user-select: none 失效因它仅禁文本高亮，不控长按菜单；ios需加-webkit-touch-callout: none，安卓微信需js拦截；且该属性不继承，须作用于文字所在元素而非父容器。
为什么只写 user-select: none 会失效
移动端长按弹出菜单和文本能否被选中是两件事：user-select: none 只管“是否允许高亮选中文本”，不管“长按时是否唤起系统菜单”。iOS 上真正控制菜单弹出的是 -webkit-touch-callout: none；安卓微信 X5 内核则基本忽略这个属性，只认 user-select + JS 拦截。单独写 user-select: none，在 iOS 下仍可能弹出“复制/搜索”气泡，在微信安卓里甚至完全没反应。
必须同时作用于文字承载元素，而非父容器
常见错误是给菜单外层 div 加样式，但实际文字在子级 span 或伪元素 ::before 里。这些子元素不会自动继承 user-select: none（该属性不继承），导致文字照常可选。
- 检查 computed styles，确认目标文字节点上
user-select的值确实是none - 若用
::before或::after插入文字，需单独给伪元素加user-select: none - 空元素或仅含空白符（
min-height: 1em或占位内容 - 避免对
input、textarea、contenteditable="true"元素设user-select: none—— 它们会直接忽略该声明
iOS 和安卓微信的兜底写法差异
iOS Safari 必须配齐 -webkit-touch-callout: none 才能关掉长按菜单；安卓微信 X5 内核对 CSS 支持极弱，-webkit-touch-callout 基本无效，只能靠 JS 补防。
- iOS 推荐组合：
.menu-item { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } - 安卓微信需额外绑定
touchstart：element.addEventListener('touchstart', e => { if (!e.target.matches('input, textarea, select')) { e.preventDefault(); } }); - 别对整个
body或*统一加规则 —— 会误杀链接长按跳转、表单聚焦等正常交互 -
pointer-events: none不是替代方案，它会同时禁掉点击，不是“仅禁长按”
容易被忽略的继承与重置问题
user-select 不继承，但一旦你给某区域设了 none，又忘了在内部可编辑区域显式恢复，就会出问题。
- 如果菜单里嵌了
contenteditable="true"区域，必须在其上重置：user-select: text - 按钮文字被包在
span里时，button自身不响应长按菜单，但span里的文字仍可被选中，得单独控制 - React/Vue 动态渲染的菜单项，若用了
contenteditable="false"，反而可能触发 Safari 的 focus 异常，优先用 CSS 控制 - 部分安卓定制系统（如华为 EMUI）会额外响应长按手势，这时仅靠 CSS 无法覆盖，JS
preventDefault()是唯一选择，但要注意它会同时阻断页面滚动
tabindex="-1" 或加个 outline: 0 就灵了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
