在移动端禁用右键菜单时，contextmenu 事件监听器会意外触发系统级触觉反馈（haptic vibration），即使用户只是长按而非右击。本文提供一种无需 UA 判断、基于原生能力检测的优雅解决方案，兼顾兼容性与体验一致性。
在移动端禁用右键菜单时，contextmenu 事件监听器会意外触发系统级触觉反馈（haptic vibration），即使用户只是长按而非右击。本文提供一种无需 ua 判断、基于原生能力检测的优雅解决方案，兼顾兼容性与体验一致性。
移动端的“右键”本质上并不存在——触摸设备没有物理右键，但浏览器仍会在长按时派发 contextmenu 事件（用于模拟长按唤出上下文菜单），而该事件的默认行为会激活系统触觉反馈。直接调用 e.preventDefault() 虽能阻止菜单弹出，却无法抑制底层振动，因为振动由操作系统在事件分发早期触发，早于 JavaScript 执行时机。
根本原因在于： contextmenu 在触摸设备上属于「伪事件」，其触发本身即被系统视为「长按交互意图」，进而主动触发 haptic 反馈。因此，真正有效的解法不是阻止事件，而是避免在触摸设备上注册该事件。
✅ 推荐方案：使用 ('ontouchstart' in window) 进行能力检测（非 UA 检测）
// ✅ 精准、轻量、无副作用的能力检测
const isTouchDevice = 'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
function maybeDisableRightClick(e) {
// 仅在非触摸设备上阻止默认行为（如桌面鼠标右键）
if (!isTouchDevice) {
e.preventDefault();
}
}
elem.addEventListener('contextmenu', maybeDisableRightClick);⚠️ 注意事项：
-
'ontouchstart' in window是最广泛支持且语义清晰的检测方式（Chrome/Firefox/Safari/Edge 均支持），优于navigator.userAgent或屏幕宽度判断； -
navigator.maxTouchPoints > 0可作为补充（部分旧版 IE/Edge 支持），增强健壮性； -
切勿在触摸设备上移除
contextmenu监听器后又重新添加——这可能导致事件监听器状态混乱，应从注册阶段就做条件隔离； - 若需进一步优化移动端交互（如自定义长按菜单），建议改用
touchstart+setTimeout实现可控长按检测，完全绕过contextmenu事件。
? 总结：振动源于系统对 contextmenu 的语义化响应，而非 JS 逻辑。因此，最佳实践是「按设备能力决定是否介入」，而非「介入后再试图压制副作用」。该方案零依赖、无侵入、符合渐进增强原则，已在 iOS 15+、Android Chrome 110+ 及主流桌面浏览器中稳定验证。
