遇到的问题：
在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.html
mainWindow.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 });
});
}