Electron应用querySelector失效及关闭按钮点击事件不触发问题

核心问题是你给标题栏元素设置了-webkit-app-region: drag，这个属性会将元素标记为窗口可拖拽区域，但同时会阻止该元素及其子元素的鼠标事件（比如click）触发——这就是关闭按钮点击无反应的原因；而document.querySelector('*')其实能选中顶部栏元素，但事件被拖拽属性拦截，所以看起来没效果。

以下是具体修复步骤：

1. 给可点击按钮添加no-drag属性 #

修改styles.css，给关闭、最小化按钮加上-webkit-app-region: no-drag，让它们能响应点击，同时修正标题栏的布局逻辑：

@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif');

* {
    background-color: #525252;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: 'Roboto Serif', serif;
}
.titlebar {
    background-color: #414141;
    height: 40px;
    -webkit-app-region: drag;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
#text{
    position: absolute;
    left: 50px;
    top: 10px;
    height: 10px;
    color: #e0e0e0;
    background-color: transparent;
    -webkit-app-region: drag;
}
.buttons {
    position: absolute;
    right: 15px;
    top: 7px;
    -webkit-app-region: drag;
}
.buttons > div {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    /* 添加no-drag允许点击 */
    -webkit-app-region: no-drag;
    cursor: pointer;
}
.buttons > #close{
    background-color: #eb5a55;
}
.buttons > #minimize{
    background-color: #f4bb40;
}

2. 修正preload.js的事件绑定 #

精准选中按钮，绑定对应事件：

const {ipcRenderer} = require('electron')

window.addEventListener('DOMContentLoaded', ()=>{
    // 关闭按钮事件
    const closeBtn = document.getElementById('close');
    closeBtn.addEventListener('click', ()=>{
        ipcRenderer.send('exit-app');
    });

    // 最小化按钮事件
    const minimizeBtn = document.getElementById('minimize');
    minimizeBtn.addEventListener('click', ()=>{
        ipcRenderer.send('minimize-app');
    });
})

3. 完善main.js的IPC事件处理 #

补充实际的窗口操作逻辑，同时补上缺失的ipcMain导入：

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path')
require('electron-reload')(__dirname);

const createWindow = () =>{
    const win = new BrowserWindow({
        width: 400,
        height: 600,
        frame: false,
        opacity: 0.98,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })
    // win.webContents.openDevTools();
    win.setResizable(false);
    win.loadFile('index.html')

    // 处理关闭事件
    ipcMain.on('exit-app', () => {
        win.close();
    });

    // 处理最小化事件
    ipcMain.on('minimize-app', () => {
        win.minimize();
    });
}

app.whenReady().then(() => {
    createWindow()
})

app.on('window-all-closed', () => {
    if(process.platform !== 'darwin') app.quit()
})

4. 修正HTML结构规范 #

调整标签顺序，符合HTML标准结构：

<html>
    <head>
        <title>Omer's Electron Application</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <div class="titlebar">
            <p id="text">Omer's Electron Application</p>
            <div class="buttons">
                <div id="minimize"></div>
                <div id="close"></div>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Omer H.