Electron中能否实现点击穿透窗口？含文件统计应用场景实现问询

阿华AIGC实验室

2026-5-15

Electron窗口点击穿透相关问题解答

问题1：Electron框架中是否可以实现不可点击或点击穿透的窗口？

当然可以！Electron专门提供了API来实现这类“穿透式”窗口，核心逻辑是让窗口完全忽略鼠标事件，让底层的应用程序能正常接收点击操作。这种窗口特别适合做悬浮提示、桌面小组件这类仅作视觉展示的场景，刚好匹配你的需求。

问题2：针对你的文件夹统计展示应用，如何实现点击穿透效果？

结合你要做的“左上角展示文件统计百分比、不干扰其他程序运行”的需求，我给你一套实际项目验证过的实现方案：

1. 创建窗口时配置核心属性

首先在创建BrowserWindow时，要设置几个关键参数，让窗口变成轻量化的悬浮层：

const { BrowserWindow } = require('electron');

let mainWindow = new BrowserWindow({
  // 固定窗口在左上角
  x: 0,
  y: 0,
  // 根据内容调整窗口大小，比如仅显示百分比的话不用太大
  width: 160,
  height: 70,
  // 去掉窗口边框和标题栏，只保留内容区域
  frame: false,
  // 开启窗口透明，避免遮挡底层应用
  transparent: true,
  // 让窗口始终处于最顶层，确保百分比能被看到
  alwaysOnTop: true,
  // 禁止窗口被拖动（不需要的话可以开启）
  movable: false,
  // 关闭窗口阴影，让视觉更简洁
  hasShadow: false,
  // 配置web环境，确保能正常调用Electron API
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true
  }
});

2. 开启点击穿透功能

窗口创建完成后，调用setIgnoreMouseEvents方法，让窗口完全忽略所有鼠标操作：

// 参数设为true，开启点击穿透
mainWindow.setIgnoreMouseEvents(true);

如果后续需要调试窗口（比如修改布局），可以临时把参数改成false，恢复鼠标交互，上线前再改回true即可。

3. 配合前端页面优化视觉体验

你的前端页面（比如index.html）要设置透明背景，只保留百分比文字，避免多余区域遮挡底层内容：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 12px;
      background: transparent; /* 页面背景完全透明 */
      color: #ffffff; /* 文字颜色可根据桌面风格调整 */
      font-size: 28px;
      font-weight: 600;
      font-family: system-ui;
    }
  </style>
</head>
<body>
  <div id="countPercentage">0%</div>
</body>
</html>