如何实现电子中除元素之外的窗口点击？

Question

我正在努力实施

单击除元素之外的窗口

在

electron

中以

react

作为前端，为此我发现了有趣的包

electron-transparency-mouse-fix

here，repo 中的演示基于 typescript， 因此我对如何将其集成到我现有的

electron-react

项目中有点困惑。

非常感谢对此的指导！

这是我的电子

main.js

文件的入口点。

const electron = require('electron');
const { app, BrowserWindow } = electron;
const path = require('path');
const isDev = require('electron-is-dev');
const ipc  = electron.ipcRenderer;



let mainWindow = null;
app.on('ready', createWindow);
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
});
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 2024,
    height: 1024,
    transparent: true,
    frame: false,
    resizable: false,
    hasShadow: false,
    title: "Lauda Lasan Window"
  });
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  // mainWindow.setIgnoreMouseEvents(true);
  mainWindow.on('closed', function () {
    mainWindow = null
  })


  /* Set did-fail-load listener once */
  mainWindow.webContents.on("did-fail-load", function() {
    console.log("did-fail-load");

    // mainWindow.loadUrl('file://' + __dirname + '/index.html');
    mainWindow.loadURL('http://localhost:3000');

  });

  mainWindow.on('page-title-updated', function (e) {
    e.preventDefault()
  });
}

Answer 1

在 Windows 和 macOS 上，可以使用可选参数将鼠标移动消息转发到网页，从而允许发出 mouseleave 等事件：

main.js

const { BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')

const win = new BrowserWindow({
    webPreferences: {
        width: 2024,
        height: 1024,
        transparent: true,
        frame: false,
        resizable: false,
        hasShadow: false,
        title: "Lauda Lasan Window",
        preload: path.join(__dirname, 'preload.js')
  }
})

ipcMain.on('set-ignore-mouse-events', (event, ignore, options) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  win.setIgnoreMouseEvents(ignore, options)
})

预加载.js

window.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('clickThroughElement')
  el.addEventListener('mouseenter', () => {
    ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
  })
  el.addEventListener('mouseleave', () => {
    ipcRenderer.send('set-ignore-mouse-events', false)
  })
})

现在你给你的body标签一个id为clickThroughElement，你将获得所需的效果，透明背景将让点击通过，但其他元素将保持可点击。

快乐的日子:)