第13章 自定义窗口交互

# 第13章 自定义窗口交互 ## 自定义可拖拽区域 默认情况下，窗口通过操作系统自带标题栏（OS chrome）来拖动。如果你的应用移除了默认标题栏，就需要使用 app-region CSS 属性来定义可用于拖动窗口的区域。设置 app-region: drag 可以将一个矩形区域标记为可拖拽。 需要注意的是，可拖拽区域会忽略所有指针事件。例如，一个与可拖拽区域重叠的按钮，在重叠区域内不会触发鼠标点击以及鼠标进入/离开事件。设置 app-region: no-drag 可以从可拖拽区域中排除某个矩形区域，从而重新启用指针事件。 要让整个窗口可拖拽，可以在 body 的样式中添加 app-region: drag： styles.cssbody {
app-region: drag;
}
注意，如果你把整个窗口都设为可拖拽，就必须同时把按钮标记为不可拖拽，否则用户将无法点击它们： styles.cssbutton {
app-region: no-drag;
}
如果只是把自定义标题栏设为可拖拽，同样需要把标题栏中的所有按钮设为不可拖拽。 ### 提示：禁用文本选中 创建可拖拽区域时，拖拽行为可能与文本选中发生冲突。例如拖动标题栏时，可能会不小心选中其中的文字。为避免这种情况，需要在可拖拽区域中禁用文本选中： .titlebar {
user-select: none;
app-region: drag;
}
提示：开发时可以设置 ELECTRON_DEBUG_DRAGGABLE_REGIONS 环境变量，让 Electron 在窗口上绘制出正在使用的可拖拽区域，并记录它们的变化频率和性能开销。这是一个实验性的调试辅助工具，而非正式 API，可能会在不另行通知的情况下变更或移除。 ### 提示：禁用上下文菜单 在某些平台上，可拖拽区域会被视为非客户区框架（non-client frame），右键点击时会弹出系统菜单。为了让上下文菜单在所有平台上表现一致，请避免在可拖拽区域上使用自定义上下文菜单。 ## 点击穿透窗口 要创建一个点击穿透窗口（即让窗口忽略所有鼠标事件），可以调用 win.setIgnoreMouseEvents(ignore) API： main.jsconst { BrowserWindow } = require('electron')

const win = new BrowserWindow()
win.setIgnoreMouseEvents(true)
鼠标事件转发：macOS 与 Windows 忽略鼠标事件会让 Web 内容对鼠标移动无感知，即不会发出任何鼠标移动事件。在 Windows 和 macOS 上，可以传可选参数将鼠标移动消息转发给 Web 页面，从而触发 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 元素上时，Web 页面处于可穿透点击状态；移出该区域后则恢复正常。