Electron桌面应用标题栏关闭按钮无法生效问题求助

问题分析 #

从你的代码来看，导致关闭按钮失效的核心原因有两点：

• mainWindow是createWindow函数的局部变量，后续事件逻辑无法正确关联到窗口实例
• 代码中同时设置devTools: false和调用mainWindow.webContents.openDevTools()，存在配置冲突，可能导致窗口状态异常

修复后代码 #

以下是调整后的index.js，关键修改点已标注：

const { app, BrowserWindow } = require('electron');
const path = require('path');
    
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
    app.quit();
}

// 将mainWindow改为全局变量，确保事件监听能访问到窗口实例
let mainWindow;

const createWindow = () => {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 870,
        height: 870,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            devTools: true, // 统一配置，避免devTools开启冲突
            nodeIntegration: true,
        },
        autoHideMenuBar: true,
        resizable: false,
        hasShadow: false,
        //titleBarStyle: 'hidden',
    });

    // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

    // 监听窗口关闭事件，确保非macOS平台直接触发应用退出
    mainWindow.on('close', () => {
        if (process.platform !== 'darwin') {
            app.quit();
        }
    });

    // Open the DevTools.
    mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

额外排查项 #

• 检查preload.js或渲染进程代码中是否存在beforeunload事件监听并阻止默认行为，这会直接导致窗口无法关闭
• 确认没有第三方模块拦截了窗口的关闭事件
• 测试时关闭所有独立的DevTools窗口，避免其影响主窗口的关闭逻辑

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