仅靠user-select: none在button上无效，必须组合-webkit-touch-callout: none、-webkit-user-select: none及各前缀，并针对微信X5内核加touchstart和contextmenu事件拦截。
user-select: none 单独加在按钮上基本无效——它不继承、对 <button> 这类可交互元素的文本选中行为无约束力，移动端长按时仍会高亮文字并弹出菜单。
为什么 button 上设 user-select: none 没用
浏览器把 <button> 视为“语义化控件”，其内部文本的选中逻辑由原生 UI 层接管，CSS 的 user-select 被主动忽略。这不是 bug，是规范行为。实测中，哪怕给 <button class="no-select">点我</button> 加了全套前缀，iOS Safari 和安卓微信里长按仍会触发高亮+菜单。
真正起效的 CSS 组合（必须全写）
禁用按钮长按选中，得同时切断「文本选中」和「系统菜单唤出」两个通路：
-
-webkit-touch-callout: none必须放在第一行，专治 iOS 长按呼出菜单（包括按钮文字） -
-webkit-user-select: none要早于标准user-select: none，否则旧版 Safari 可能读不到 - 不能只写在父容器上，必须直接作用于
<button>元素本身或其包裹容器（如<div class="btn-wrapper"><button>...</button></div>） - 避免全局
* { user-select: none }，否则会误伤<input>的光标定位
推荐写法：
立即学习“前端免费学习笔记（深入）”；
.no-longpress-btn {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}遇到 input/textarea 或 contenteditable 怎么办
如果按钮实际是用 <input type="button"> 或带 contenteditable 的伪按钮实现的，user-select 依然会被忽略。此时只能换策略：
- 改用
<div role="button" tabindex="0">替代原生表单控件，再加.no-longpress-btn类 - 若必须保留
<input>，可在focus时 JS 动态移除该类，失焦后恢复，避免干扰输入操作 - 不要对可编辑区域强行加
pointer-events: none——它会彻底禁掉点击，不是“仅禁长按”
微信安卓 WebView 必须加 JS 兜底
微信 X5 内核会无视 -webkit-touch-callout，仅靠 CSS 在安卓微信里大概率失效。必须补监听事件：
- 给目标按钮绑定
touchstart并e.preventDefault()，阻止默认长按流程 - 同时监听
contextmenu事件并preventDefault()，覆盖安卓端菜单唤出路径 - 事件必须绑定到按钮自身，不能委托给父级——委托会漏掉首次长按
示例：
const btn = document.querySelector('.no-longpress-btn');
btn.addEventListener('touchstart', e => e.preventDefault());
btn.addEventListener('contextmenu', e => e.preventDefault());最常被忽略的一点：iOS 上 <button> 的 alt 或 title 属性值，即使不可见，长按时仍可能被当作文本高亮——建议清空这些属性，或改用 aria-label 替代。
