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
• 空元素或仅含空白符（ 、换行）的节点，在微信安卓 WebView 中常被跳过判断，建议加 min-height: 1em 或占位内容
• 避免对 input、textarea、contenteditable="true" 元素设 user-select: none —— 它们会直接忽略该声明

iOS 和安卓微信的兜底写法差异

iOS Safari 必须配齐 -webkit-touch-callout: none 才能关掉长按菜单；安卓微信 X5 内核对 CSS 支持极弱，-webkit-touch-callout 基本无效，只能靠 JS 补防。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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() 是唯一选择，但要注意它会同时阻断页面滚动

真实项目中最难调的不是哪行代码写错了，而是得确认那个菜单文字节点在 iOS 里是否被浏览器判定为“可选区域”——有时候删掉一个 tabindex="-1" 或加个 outline: 0 就灵了。