如何在移动设备上按住图像时禁用上下文菜单？

Question

如果您在Chrome浏览器中尝试按住一张图片，会弹出一个选项卡，提供保存等选项。我想实现的是使用带有触摸事件的图像，在屏幕上移动它。但每当我按住它时，就会遇到上述问题。有没有办法解决？

- scripter

---

我刚意识到这不太清楚 - 你是特别想防止下载，还是只是想启用拖拽？ - Alnitak

防止下载，这样用户可以按住并且能够移动它而不会出现通常会弹出的任何弹窗。 - scripter

这就是我所说的不清楚。你的实际意图是为了使移动变得更容易。你并不想阻止下载（例如让窃取你的图像变得更困难）- 你想要禁用上下文菜单。 - Alnitak

是的。抱歉之前没有说清楚。你是正确的。 - scripter

我建议您重新编写问题的标题... - Alnitak

Answer 1

在移动设备上长按相当于桌面端的上下文菜单事件。如果您为对象添加此事件的处理程序，返回false并调用event.preventDefault()，那么您不应该遇到此问题。

- allnodcoms

Answer 2

你可以尝试使用 pointer-events: none; CSS 样式来针对移动设备目标图片，并使用媒体查询仅限制于移动设备。

更多关于指针事件的信息请参见这里。

- Pranjal

Answer 3

如果你决定使用pointer-events: none，这种方法很可能会阻止你想要应用于图像的逻辑。我建议的是明确地阻止上下文菜单。在React中，你可以按照以下方式实现：

<img
    src={imgSrc}
    width={width}
    height={height}
    onContextMenu={(e) => e.preventDefault()}
/>

- Jorge Cambra