在浏览器 DevTools 中不需要的右键单击

Posted 2023-03-07

【中文标题】在浏览器 DevTools 中不需要的右键单击

【英文标题】：Unwanted right-click with in browser DevTools

【发布时间】：2018-08-12 01:04:17

【问题描述】：

我对 Web 开发比较陌生，目前正在构建一个 Ionic/angular2 混合移动应用程序。到目前为止，我已经很好地使用了浏览器中的 devtools。

当我使用移动设备测试屏幕时，只要我单击/按住，浏览器就会注册一次右键单击。只有当我在设备测试视口内单击并按住时才会发生这种情况，而不是在设备视图之外。

因此，我认为这可能是应用程序代码中的问题，但出现的右键菜单是我电脑上的菜单，而不是移动设备上的二次点击菜单。它发生在更新的 firefox 和 chrome devtools 中，我找不到任何设置。我有一台 macbook pro，但我已将所有触控板/鼠标设置调整为无济于事。

这极大地阻碍了我的测试，因为我的应用程序中有一个按住功能，但我无法测试它，因为注册右键时，我的应用程序屏幕无法记录 mouseup 事件。

这是我在这里提出的第一个问题，所以请放轻松，哈哈，谢谢你的帮助！

【参考方案1】：

这是由于 Chrome 中的“功能”在按住触摸光标时模拟上下文菜单（右键单击）。这是因为在大多数 android/ios 设备上，长按会弹出复制/粘贴菜单。

要禁用此行为，只需将其添加到您的网络应用：

window.addEventListener('contextmenu', function(e) 
  e.preventDefault();
, true);

这会在上下文菜单出现之前杀死它。