跳至主要內容

自訂視窗互動

自訂可拖曳區域​

預設情況下，視窗是使用作業系統 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​

忽略滑鼠訊息會使網頁內容忽略滑鼠移動，這表示不會發出滑鼠移動事件。在 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 元素上方時點擊穿透，並在其外部恢復正常。