解决Electron透明窗口点击不影响其他应用
遇到的问题：
在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 });});
}