根本原因是iOS Safari和部分安卓WebView默认监听touchstart触发原生上下文菜单；-webkit-touch-callout:none是唯一直接禁用CSS属性但仅iOS有效，安卓需contextmenu事件拦截+onmousedown处理。
手机长按链接弹出菜单的根本原因
这是 iOS Safari 和部分安卓 WebView 的默认行为，系统会监听 touchstart 事件并触发原生上下文菜单（复制、分享、在新标签页打开等）。-webkit-touch-callout: none 是唯一能直接禁用该弹窗的 CSS 属性，但它只对 iOS 有效，安卓 Chrome 不响应这个声明。
为什么只加 -webkit-touch-callout: none 常常没用
常见错误是只写这一条，却忽略了三个关键前提：
- 必须作用在可点击的元素上（比如
a、button或带onclick的div），纯文本节点无效 - 需要配合
user-select: none，否则长按仍可能选中文本并触发光标/复制菜单 - 若元素有
href且值不为空（如href="#"），iOS 仍可能弹出菜单——得把href设为javascript:void(0)或移除
完整最小可用写法：
a.no-callout {
-webkit-touch-callout: none;
user-select: none;
-webkit-user-select: none;
}
安卓端要额外处理点击反馈和菜单
Chrome for Android 不吃 -webkit-touch-callout，得靠 JavaScript 拦截：
立即学习“前端免费学习笔记（深入）”；
- 监听
contextmenu事件并e.preventDefault()（对右键/长按生效） - 对
a标签，还需加onmousedown="return false"防止部分安卓机型触发默认行为 - 注意：禁用后，如果没提供替代交互（比如自定义弹层），用户会完全失去操作入口
简单 JS 补丁示例：
document.querySelectorAll('a.no-callout').forEach(el => {
el.addEventListener('contextmenu', e => e.preventDefault());
});
真要彻底禁用，还得考虑可访问性和副作用
这个需求通常出现在「伪按钮」场景（比如用 a 标签模拟 Tab 切换），但要注意：
- 屏幕阅读器可能依赖
href判断链接语义，清空或乱设href会影响无障碍体验 - 禁用长按后，用户无法复制链接地址——如果这是合理需求（比如分享链接），就不该全局禁止
- 某些 PWA 或 WebKit 内核 App（如微信内置浏览器）对
-webkit-touch-callout支持不稳定，得实测
最稳妥的做法：只对明确非导航用途的元素加禁用，且保留键盘焦点和 Enter 键响应能力。
