跳转到主要内容

自定义窗口交互

自定义拖动区域​

默认情况下，窗口使用操作系统 Chrome 提供的标题栏进行拖动。移除默认标题栏的应用程序需要使用 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 元素上时，网页将变为可穿透，并在其外部恢复正常。