如何在Flutter Web上禁用上下文菜单？（右键点击，触摸按压）

Question

如何在Flutter中禁用上下文菜单（2.x，Web / Browser），例如右键单击或在移动设备上长按触摸（例如DevTools移动视图）时。

我来自Angular等Web开发领域。在HTML/JS中，它的工作方式如下：

document.body.addEventListener('contextmenu', (event) => {
  event.preventDefault();
});

但是在Flutter中如何实现呢？是否存在可以禁用的上下文菜单事件？阻止鼠标右键单击不起作用，因为这也会影响到移动端长按鼠标右键（释放时）。

- y0nd0

Answer 1

目前没有官方的解决方案。这是相关的 GitHub 问题：flutter#78671。

解决方法：只需打开浏览器的开发工具并在控制台中执行以下代码：

document.body.addEventListener('contextmenu', (event) => {
  event.preventDefault();
});

Flutter 的热重载不会重新加载页面，因此在整个会话期间都有效。

- y0nd0

Answer 2

这对我有用！

首先：

import 'dart:html' as html;

然后初始化此代码以防止右键单击鼠标显示上下文菜单。

html.document.body!
        .addEventListener('contextmenu', (event) => event.preventDefault());

在我的项目中，它运行在 Flutter 2.2.3 版本 • 稳定通道。

- Nick Korolev

Answer 3

你可以在你的项目中的 web\index.html 添加一个脚本。

<script>
  document.body.addEventListener('contextmenu', (event) => {
    event.preventDefault();
  });
</script>

进行此更改后，需要重新启动调试模式。已在Flutter 3.3上进行测试。

在跨平台项目/上下文中避免使用import 'dart:html'。Flutter也会发出警告。

- Domske

Answer 4

您可以在此处看到：https://api.flutter.dev/flutter/widgets/ContextMenuController-class.html 您可以使用：BrowserContextMenu.disableContextMenu(); 但请注意，这将返回一个 future。

- Doublon