遇到的問題：
在electron透明窗口點擊，影響窗口下的應用接受不到點擊事件
解決方案：
CSS+IgnoreMouseEvents
實現原理：
主進程默認設置禁用目標窗口鼠標事件（禁用之后能檢測到mousemove），UI進程檢測頁面的的mousemove事件，判斷是否是透明區域，如果是透明區域則禁用鼠標事件，如果不是透明區域則關閉（渲染進程根節點設置point-events: none, 需要檢測的界面設置point-events: unset）
實現代碼：
下面是渲染進程下面👇
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Electron透明窗口示例</title><style>body {pointer-events: none;}.container {width: 500px;height: 500px;display: flex;justify-content: center;align-items: center;pointer-events: none;}.targetArea {width: 250px;height: 250px;background-color: #000;pointer-events: auto;text-align: center;line-height: 250px;color: #fff;font-size: 20px;}</style>
</head>
<body><div class="container"><div class="targetArea">目標區域</div></div><script src="./renderer1.js" type="module"></script>
</body>
</html>
const { ipcRenderer } = require('electron');(function() {try {console.log('🐊 Smart mouse events injection started');// 智能鼠標事件穿透實現function setupSmartMouseEvents() {console.log('🐊 Setting up smart mouse events...');// 監聽鼠標移動事件window.addEventListener("mousemove", (event) => {try {// 關鍵判斷：如果鼠標在透明區域（event.target是document.documentElement）const isInTransparentArea = event.target === document.documentElement;console.log(isInTransparentArea ? '不透明區域' : '透明區域')if (isInTransparentArea) {// 在透明區域：啟用鼠標事件穿透ipcRenderer.send('set-ignore-mouse-events', true);} else {// 在內容區域：禁用鼠標事件穿透，讓當前窗口處理事件ipcRenderer.send('set-ignore-mouse-events', false);}} catch (error) {console.error('🐊 Error in mousemove handler:', error);}});// 初始設置：啟用穿透try {ipcRenderer.send('set-ignore-mouse-events', true);console.log('🐊 Initial mouse penetration enabled');} catch (error) {console.error('🐊 Error setting initial mouse penetration:', error);}}// DOM加載完成后設置鼠標事件if (document.readyState === 'loading') {document.addEventListener('DOMContentLoaded', setupSmartMouseEvents);} else {setupSmartMouseEvents();}} catch (error) {console.error('🐊 Error in smart mouse events injection:', error);}
})()下面是主進程代碼👇
這里是主進程代碼
function createWindow() {// 創建瀏覽器窗口mainWindow = new BrowserWindow({width: 800,height: 600,frame: false,transparent: true,webPreferences: {nodeIntegration: true,contextIsolation: false,enableRemoteModule: true}});// 加載應用的 index.htmlmainWindow.loadFile('src/mousevent.html');// 設置全局引用global.mainWindow = mainWindow;ipcMain.on('set-ignore-mouse-events', (event, value) => {console.log('set-ignore-mouse-events', value)mainWindow.setIgnoreMouseEvents(value, { forward: true });});
}
的進化之路)
)
