如何在Electron中禁用鼠标的下一个/上一个按键？

Question

我有一个Electron应用程序，其中包含不同的页面。我的应用程序中的某些按钮使用户在这些页面之间导航。但是用户也可以使用鼠标侧面的键导航到上一页/下一页。请问如何禁用这些按键？

图片说明

- Roman Diez

---

我不知道有标准的方法来做这件事。有一个 app-command 事件，当你使用鼠标按钮时会触发它，但我不认为你可以取消该事件。从一些测试中得知，甚至看起来该事件并没有为鼠标按钮触发。你能否在你的页面中添加一个 mousedown 处理程序并取消导航？ - pushkin

谢谢！它是mouseup事件而不是mousedown，但这很好，因为我在事件中按下了按钮（3 = 上一个和4 = 下一个）。 - Roman Diez

太好了！我发布了一个官方答案。 - pushkin

Answer 1

目前没有一种标准的方法可以做到这一点。

BrowserWindow上有一个 app-command 事件，该事件将触发与按下鼠标的向前/向后按钮相关的AppCommands。

Note: "对于" in English originally translated to "related to", but it doesn't convey the meaning well, so I have changed to "与...相关".

mainWindow.on('app-command', (e, cmd) => {
  if (cmd === 'browser-backward' || cmd === 'browser-forward') {
    // ...
  }
})

现在这个事件是不可取消的，但理论上，您可以添加一个will-navigate事件，并取消随后的导航（或者反过来，取消所有导航，除非您点击了按钮）。

不幸的是，这个解决方案似乎不起作用，因为当按下向后/向前按钮时，该事件不会被触发，可能是由于此问题。

虽然存在这个问题，但您可以拦截mouseup事件，并取消向后和向前按钮的事件：

window.addEventListener("mouseup", (e) => {
   if (e.button === 3 || e.button === 4)
      e.preventDefault();
});

- pushkin

Answer 2

对我来说，这个很有效。

win.webContents.on('dom-ready', () => {
  this.disableMouseNavigation();
});

private disableMouseNavigation(): void {
    const disableNavigationScript = `
      document.addEventListener('mouseup', (event) => {
        if (event.button === 3 || event.button === 4) {
          event.preventDefault();
          event.stopPropagation();
        }
      });
    `;
   win.webContents.executeJavaScript(disableNavigationScript);
}

- horko