跳到主要内容

自定义窗口交互

自定义可拖动区域​

默认情况下，窗口使用操作系统提供的标题栏进行拖动。移除默认标题栏的应用需要使用 app-region CSS 属性来定义可用于拖动窗口的特定区域。设置 app-region: drag 将一个矩形区域标记为可拖动。

重要的是要注意，可拖动区域会忽略所有指针事件。例如，一个与可拖动区域重叠的按钮元素在该重叠区域内不会发出鼠标点击或鼠标进入/退出事件。设置 app-region: no-drag 通过从可拖动区域排除一个矩形区域来重新启用指针事件。

要使整个窗口可拖动，可以将 app-region: drag 添加为 body 的样式

styles.css
body {
  app-region: drag;
}

请注意，如果您已使整个窗口可拖动，则还必须将按钮标记为不可拖动，否则用户将无法单击它们

styles.css
button {
  app-region: no-drag;
}

如果您仅将自定义标题栏设置为可拖动，则还需要使标题栏中的所有按钮都不可拖动。

提示：禁用文本选择​

创建可拖动区域时，拖动行为可能会与文本选择冲突。例如，当您拖动标题栏时，可能会意外地选择其文本内容。为了防止这种情况，您需要在可拖动区域内禁用文本选择，如下所示

.titlebar {
  user-select: none;
  app-region: drag;
}

提示：禁用上下文菜单​

在某些平台上，可拖动区域将被视为非客户端框架，因此当您右键单击它时，会弹出一个系统菜单。为了使上下文菜单在所有平台上表现正确，您永远不应在可拖动区域上使用自定义上下文菜单。

点击穿透窗口​

要创建一个点击穿透窗口，即让窗口忽略所有鼠标事件，您可以调用 win.setIgnoreMouseEvents(ignore) API

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

转发鼠标事件 macOS Windows​

忽略鼠标消息会使 Web 内容忽略鼠标移动，这意味着不会发出鼠标移动事件。在 Windows 和 macOS 上，可以使用可选参数将鼠标移动消息转发到网页，从而允许发出诸如 mouseleave 之类的事件

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

const win = new BrowserWindow({
  webPreferences: {
    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)
})
preload.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)
  })
})

这使得网页在 #clickThroughElement 元素上时可点击穿透，并在其外部恢复正常。