electron如何屏蔽鼠标上的前进后退快捷键？

Question

electron如何屏蔽鼠标上的前进后退快捷键。

客户端项目，使用vue-router做路由跳转，经常误触鼠标前进后退快捷键。

Answer 1

// 阻止页面跳转（解决鼠标快捷键误触前进后退）
let navigateDisabled = false;

window.addEventListener('mouseup', event => {
    if ([4, 5].includes(event.which)) {
        navigateDisabled = true;
    } else {
        navigateDisabled = false;
    }
});

router.beforeEach(async (to, from, next) => {
    // 阻止鼠标快捷键引起的前进后退
    if (navigateDisabled) {
        next(false);

        navigateDisabled = false;
        return;
    }

    next();
});

Answer 2

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadURL('file://' + __dirname + '/index.html');

  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.executeJavaScript(`
      document.addEventListener('mousedown', (event) => {
        if (event.button === 3 || event.button === 4) { // 3: BrowserBack, 4: BrowserForward
          event.preventDefault();
        }
      });
    `);
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});