必须用 e.preventDefault() + user-select: none 双保险阻止移动端长按默认行为，仅靠 CSS 或仅靠 JS 均会漏掉文字高亮、系统菜单弹出、图片保存等场景；touchstart 中未及时调用 preventDefault() 会导致文本高亮、滚动卡顿、contextmenu 触发及微信 WebView 跳过监听。
移动端长按默认行为（如文字高亮、系统菜单弹出、图片保存）必须用 e.preventDefault() + user-select: none 双保险阻止，仅靠 CSS 或仅靠 JS 都会漏掉某些场景。
touchstart 里不调用 preventDefault() 会怎样
部分安卓 WebView 和 iOS Safari 在 touchstart 后若未及时 e.preventDefault()，会触发以下连锁反应：
- 文本节点被高亮（即使加了
user-select: none也可能晚一帧才生效） - 页面滚动被临时阻断，导致“卡一下”再恢复
- 松手后意外触发
contextmenu或原生图片保存菜单 - 某些微信内置浏览器中，
touchstart后 100ms 内未 prevent，直接跳过后续事件监听
实操建议：
-
touchstart回调第一行必须是e.preventDefault() - 不要依赖
{ passive: false }自动处理——显式调用更可控 - 如果元素含可编辑内容（如
contenteditable），需额外在touchstart中同步调用window.getSelection().removeAllRanges()
为什么 user-select: none 单独用不保险
user-select: none 只能禁文本选中，对系统级长按行为（如 Android 长按图片弹“保存图片”、iOS 长按链接弹“打开/复制”）完全无效。
立即学习“前端免费学习笔记（深入）”；
常见误判场景：
- 给整个容器设
user-select: none，但子元素是<img alt="HTML在混合式移动应用中的长按默认行为阻止与结构标记" >或<a></a>—— 这些标签自带原生长按逻辑，CSS 不穿透 - PC 端鼠标右键仍能呼出上下文菜单，
user-select对此无影响 - 部分老旧安卓机型（如 Android 7.0 WebView）会忽略该样式
实操建议：
- 对
<img alt="HTML在混合式移动应用中的长按默认行为阻止与结构标记" >元素，优先加oncontextmenu="return false"属性 - 对链接类元素，移除
href或改为href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488"（注意 SEO 影响） - 全局兜底：监听
contextmenu事件并e.preventDefault()，但只绑定到明确需要禁用的元素上
role="none" 和 aria-hidden="true" 对长按菜单结构的影响
长按弹出的菜单若没正确标记可访问性属性，屏幕阅读器可能跳过、重复读或误判层级关系，尤其在混合式应用（如 Cordova、Capacitor）中更易暴露问题。
关键点：
- 菜单容器必须设
role="menu"，每个选项用role="menuitem"，否则 VoiceOver/NVDA 不识别为菜单 - 不要用
aria-hidden="true"隐藏菜单——它会让整个子树不可访问；应改用hidden属性或display: none -
role="none"仅适用于纯粹装饰性元素（如分隔线），不能用于菜单主体或按钮 - 菜单激活时，要通过
aria-expanded="true"同步通知状态，并把焦点移到第一个可操作项
容易被忽略的是：混合式容器（如 WebView 嵌套在原生 Tab 中）可能截断 aria-* 的传播路径，此时需在原生层做额外 bridge 透传。
遮罩层下仍需响应长按怎么办
当页面有全屏遮罩（如 loading overlay）时，遮罩本身若设 pointer-events: none，底层元素的 touchstart 能触发，但 preventDefault() 会失效——因为事件实际发生在遮罩层，而你绑事件的对象是底层元素。
解法不是放弃遮罩，而是分层拦截：
- 遮罩层自身监听
touchstart并立即e.preventDefault()，同时透传坐标给底层逻辑 - 底层元素不直接绑
touchstart，改由遮罩层代理触发（用自定义事件或回调） - 遮罩层设
style="pointer-events: auto; touch-action: manipulation;"，避免干扰滚动 - 若遮罩需支持滚动，用
overflow: hidden+position: fixed替代pointer-events: none
最麻烦的其实是 Cordova 的 WKWebView 下，遮罩层和底层之间存在事件捕获层缺失，这时得靠 document.elementFromPoint() 手动查点位，再 dispatch 事件到真实目标元素。
