Electron标题栏干扰鼠标事件，请求排查方案

核心问题分析 #

你遇到的是macOS下Electron隐藏系统标题栏后，系统保留的标题栏点击区域（即使视觉隐藏）会优先捕获鼠标事件，导致自定义标题栏的上半部分元素无法响应hover、光标变化等交互。这是因为titleBarStyle: 'hidden'仅隐藏了标题栏的视觉层，系统仍会在窗口顶部保留一块“不可见的标题栏区域”用于拖拽、事件拦截，而你的自定义按钮刚好和这块区域重叠。

排查与解决步骤 #

1. 验证不可见标题栏区域 #

给自定义标题栏顶部添加测试样式，直观确认拦截区域：

.custom-titlebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px; /* 接近macOS默认标题栏高度 */
  background: rgba(255,0,0,0.3);
  z-index: 999;
}

移动鼠标观察：如果红色区域内鼠标无响应，说明这块就是系统拦截的区域。

2. 调整titleBarOverlay配置 #

你的titleBarOverlay: { height: 0 }设置无效，macOS下即使设为0，系统仍会保留默认标题栏高度（约28px）。正确处理方式：

• 若不需要系统标题栏交互，直接移除titleBarOverlay配置，保留frame: false
• 若要保留红绿灯，将titleBarOverlay高度设为自定义标题栏的45px，让系统把拦截区域限制在你指定范围：

{
  width: 2200,
  height: 1200,
  webPreferences: {
    nodeIntegration: true,
    preload: path.join(__dirname, './preload.js'),
  },
  autoHideMenuBar: true,
  frame: false,
  titleBarStyle: 'hidden',
  // 匹配自定义标题栏高度，同时设置透明背景不影响视觉
  titleBarOverlay: { height: 45, color: 'transparent', symbolColor: '#fff' },
  trafficLightPosition: {x: 10, y:10},
  show: false,
}

3. 禁用系统默认拖拽区域（按需） #

如果自定义标题栏已通过-webkit-app-region: drag实现拖拽，可完全禁用系统默认拦截：

// 主进程中添加
win.webContents.on('did-finish-load', () => {
  win.webContents.insertCSS(`
    html {
      -webkit-app-region: drag; /* 让整个窗口可拖拽 */
    }
    .custom-titlebar-button {
      -webkit-app-region: no-drag; /* 排除按钮，确保交互正常 */
    }
  `);
});

4. 调整红绿灯位置避免重叠 #

你设置的trafficLightPosition: {x:10, y:10}可能让红绿灯的点击区域覆盖按钮上半部分，尝试将y值调整到自定义标题栏中间位置：

trafficLightPosition: {x: 10, y: 22}, // 45px高度的中间位置

5. 确认元素层叠层级 #

检查自定义按钮的z-index，确保它在系统拦截层上方：

.custom-titlebar-button {
  z-index: 9999;
  cursor: pointer;
  /* 其他样式 */
}

内容的提问来源于stack exchange，提问作者Lae