javascript - Electron中如何让鼠标穿过窗口

Question

如何制作一个 Electron BrowserWindow，鼠标事件完全传递到下面的任何内容？

该窗口仅用于显示内容。当按下 ctrl 时，窗口应变为启用状态。

Answer 1

Click-through window

To create a click-through window, i.e. making the window ignore all mouse events, you can call the 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}

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

您可能需要考虑的一些事项:

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

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

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

我还没有在 Electron 中找到一种将窗口发送到后台的方法，所以如果它下面有一个窗口，新窗口将位于顶部，直到您聚焦一个窗口。将窗口聚焦后，点击窗口将永远无法获得焦点，因此:

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

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

按下 ctrl 时启用焦点

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

_./main.js

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)

_./index.html

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

_{./package.json}

{
  "name": "your-app-name",
  "version": "1.0.0",
  "description": "A description of your application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/link/to/repo",
  "keywords": [
    "some",
    "keywords"
  ],
  "author": "You",
  "license": "Your License",
  "dependencies": {
    "electron": "^3.0.9"
  }
}

安装方式:

> npm install

运行方式:

> npm start