Electron中如何让鼠标穿过窗口

Question

我怎样才能制作一个电子BrowserWindow，鼠标事件可以完全传递到下面的任何东西？

窗口只是用来展示东西的。当ctrl按下 时，窗口应变为启用状态。

Answer 1

点击窗口

要创建点击窗口，即使窗口忽略所有鼠标事件，可以调用win.setIgnoreMouseEvents(ignore)API：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setIgnoreMouseEvents(true)

^{- https:// Electronjs.org/docs/api/frameless-window#click-through-window}

我已将示例扩展为下面的完整电子应用程序。

您可能需要考虑以下一些事项：

• 设置x和y坐标
• 如果不设置宽度和高度，则默认值分别为 800px 和 600px，
• 如果你不需要背景，你必须设置transparent: true

要使窗口“点击通过”，您还需要：

• 使用移除框架frame: false
• 使用 禁用焦点focusable: false，这隐式设置skipTaskbar:true

我还没有在电子中找到将窗口发送到后台的方法，因此如果其下方有一个窗口，则新窗口将位于顶部，直到您聚焦窗口为止。将窗口聚焦后，点击窗口将永远无法获得焦点，因此：

• 最小化当前窗口将聚焦堆栈中的下一个窗口，这意味着点击窗口将位于下一个窗口的下方。
• 取消最大化当前窗口将显示点击后窗口位于启动点击后窗口之前可能位于当前窗口下方的任何窗口的顶部。
• 一旦点击窗口位于堆栈底部，它就必须留在那里。

无论如何，此类应用程序可能会在登录时启动，因此在大多数情况下这不应该成为问题。

启用焦点时ctrl按下

我认为这目前不可能，因为当窗口未聚焦时需要全局监听键盘事件。

_./main.js

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setIgnoreMouseEvents(true)

_./index.html

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

let mainWindow = null

function main() {
    mainWindow = new BrowserWindow({
        x: 0, y: 0,
        transparent: true,
        focusable: false,
        frame: false
    })
    mainWindow.setIgnoreMouseEvents(true)
    mainWindow.loadFile(`./index.html`)
    mainWindow.on('close', event => {
        mainWindow = null
    })
}

app.on('ready', main)

_{./package.json}

<h1 style="color: #FFF">Hello World!</h1>

安装：

> npm install

运行：

> npm start