上下文菜单¶

上下文菜单是弹出式菜单，当在应用界面的某处右键单击（或在 Windows 上按下 Shift + F10 等快捷键）时出现。

在 Electron 中，默认不会显示上下文菜单。但是，可以通过在 Menu 类的实例上使用 menu.popup 函数来创建上下文菜单。你需要监听特定的上下文菜单事件，并手动设置 menu.popup 的触发器。

在 Electron 中，有两种方式可以监听上下文菜单事件：一种是通过主进程中的 webContents，另一种是在渲染进程中通过 contextmenu Web 事件。

使用 `context-menu` 事件（主进程）¶

每当在特定 WebContents 实例的范围内检测到右键单击时，就会触发 context-menu 事件。传递给监听器的 params 对象提供了大量属性，用于区分正在接收事件的元素类型。

例如，如果你想为链接提供上下文菜单，请检查 linkURL 参数。如果你想检查可编辑元素（例如 <textarea/>），请检查 isEditable 参数。

```fiddle docs/fiddles/menus/context-menu/web-contents

## 使用 `contextmenu` 事件（渲染进程） {#using-the-contextmenu-event-renderer}

或者，你也可以监听渲染进程中 DOM 元素上可用的 [`contextmenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event) 事件，并通过 IPC 调用 `menu.popup` 函数。

> [!TIP]
> 要了解 Electron 中 IPC 的基础知识，请参阅 [进程间通信](ipc.md) 指南。

```fiddle docs/fiddles/menus/context-menu/dom|focus=preload.js

在 macOS 上，Writing Tools、AutoFill 和 Services 菜单项在 Electron 的上下文菜单中默认处于禁用状态。若要启用这些功能，请将目标 webContents 关联的 WebFrameMain 传递给 menu.popup 中的 frame 参数。

Associating a frame to the context menu

const { BrowserWindow, Menu } = require('electron/main')

const menu = Menu.buildFromTemplate([{ role: 'editMenu' }])
const win = new BrowserWindow()
win.webContents.on('context-menu', (_event, params) => {
  // Whether the context is editable.
  if (params.isEditable) {
    menu.popup({
    // highlight-next-line
      frame: params.frame
    })
  }
})

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 el/electron

上下文菜单¶

使用 context-menu 事件（主进程）¶

其他 macOS 菜单项（例如 Writing Tools）¶

使用 `context-menu` 事件（主进程）¶