在 Chrome 中使用设备模式时如何禁用长按上下文菜单？答案

【问题标题】：How to disable the context menu on long press when using device mode in Chrome?在 Chrome 中使用设备模式时如何禁用长按上下文菜单？
【发布时间】：2016-12-09 12:25:43
【问题描述】：

在 Chrome 中使用 device mode 时如何禁用长按上下文菜单？

我的意思是这个上下文菜单：

我问这个是因为我想调试移动设备的长按手势，而上下文菜单导致 my react app 以一种奇怪的方式表现：

当我尝试重新排序列表时，“奇怪的事情开始发生”：所选项目开始漂浮在整个地方（从下面的快照中可以看出）。 Hello World 被所选项目遮挡。真奇怪。

【问题讨论】：

标签： google-chrome google-chrome-devtools

【解决方案1】：

我开发了一个稍微“高级”的解决方法，它仍然（大部分时间）在右键单击时显示上下文菜单，同时防止它在模拟长按时显示：

window.oncontextmenu = function() {
    if (event.button != 2 && !(event.clientX == event.clientY == 1)) {
        event.preventDefault();
    }
}

【讨论】：

【解决方案2】：

我的解决方法是在设备模式下测试长按操作时将此代码输入 JS 控制台：

window.oncontextmenu = function() { return false; }

【讨论】：

它实际上会导致上下文菜单打开'从不'，真的，所以......可能不是很多人会满意的。然而，这是一个不错的解决方法。

【解决方案3】：

@marsk 评论是正确的，因此根据之前的答案，我想出了另一个使用 PointerEvent.pointerType 的解决方案

window.oncontextmenu = function (event: any) {
  // eslint-disable-next-line no-console
  console.log(event); // prints [object PointerEvent]

  const pointerEvent = event as PointerEvent;
  // eslint-disable-next-line no-console
  console.log(`window.oncontextmenu: ${pointerEvent.pointerType}`);

  if (pointerEvent.pointerType === 'touch') {
    // context menu was triggerd by long press
    return false;
  }

  // just to show that pointerEvent.pointerType has another value 'mouse' aka right click
  if (pointerEvent.pointerType === 'mouse') {
    // context menu was triggered by right click
    return true;
  }

  // returning true will show a context menu for other cases
  return true;
};

【讨论】：