解决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.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 });
  });
}