无法单击标题栏中的按钮（Electron App）

Question

我尝试使用 Electron 构建一个简单的文本编辑器。 目前我想添加一个自定义标题栏，但它实际上不起作用，因为按钮不可点击...

我向按钮添加了一个 onclick 标签。

main.js:

//-- variables --\\

const { BrowserWindow, app, Menu, dialog, ipcMain } = require("electron")
let window
let filePath = null //currently opened file
let openFiles = []  //opened files



//-- startup --\\

app.whenReady().then(function()
{
    createWindow()
    createMenu()
})



//-- functions --\\

function createWindow()
{
    window = new BrowserWindow
    ({
        width: 1000,
        height: 600,
        frame: false,
        icon: "./assets/icon.png",
        darkTheme: true,
        autoHideMenuBar: true,
        webPreferences:
        {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    //window.maximize()
    window.loadFile("./frontend/index.html")
    window.webContents.openDevTools()
}

function createMenu()
{
    Menu.setApplicationMenu(Menu.buildFromTemplate
    ([
        {
            label: "File",
            submenu:
            [
                {
                    label: "Save",
                    click: saveFile,
                    accelerator: "CmdOrCtrl+S"
                },
                {
                    label: "Open",
                    click: openFile,
                    accelerator: "CmdOrCtrl+O"
                },
                {
                    label: "New",
                    click: newFile,
                    accelerator: "CmdOrCtrl+N"
                }
            ]
        }
    ]))
}

async function promptFilePathOpen()
{
    await dialog.showOpenDialog
    ({ properties: ["openFile"] }).then(function(res)
    {
        if(res.canceled) return
        filePath = res.filePaths[0]
    })
}

async function promptFilePathSave()
{
    await dialog.showSaveDialog().then(function(res)
    {
        if(res.canceled) return
        filePath = res.filePath
    })
}

async function openFile()
{
    await promptFilePathOpen()
    //openFiles.push(filePath)
    window.webContents.send("crd-openFile", filePath)
}

async function saveFile()
{
    if(filePath == null || undefined) await promptFilePathSave()
    window.webContents.send("crd-saveFile", filePath)
}

async function newFile()
{
    filePath = null
    await promptFilePathSave()
    window.webContents.send("crd-resetEditor")
    window.webContents.send("crd-saveFile", filePath)
}



//-- listeners --\\

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

ipcMain.on("crd-minimizeWindow", function() //does not get called by the renderer
{
    //coming soon
})

ipcMain.on("crd-toggleWindowSize", function() //does not get called by the renderer
{
    //coming soon
})

ipcMain.on("crd-closeWindow", function() //does not get called by the renderer
{
    console.log("quit")
})

renderer/script.js:

//-- imports --\\

const { ipcRenderer } = require("electron")
const fs = require("fs")

const editorElem = document.querySelector("textarea.editor")



//-- functions --\\

function minimizeWindow() // does not get called by the button (index.html)
{
    ipcRenderer.send("crd-minimizeWindow")
}

function toggleWindowSize() // does not get called by the button (index.html)
{
    ipcRenderer.send("crd-toggleWindowSize") 
}

function closeWindow() // does not get called by the button (index.html)
{
    ipcRenderer.send("crd-closeWindow")
}



//-- listeners --\\

ipcRenderer.on("crd-openFile", function(e, path)
{
    editorElem.value = fs.readFileSync(path, "utf-8")
})

ipcRenderer.on("crd-saveFile", function(e, path)
{
    fs.writeFile(path, editorElem.value , function(res, err)
    {
        if(err) throw err
    })
})

ipcRenderer.on("crd-resetEditor", function()
{
    editorElem.value = ""
})

整个代码可以在我的 GitHub 上获取，因为我这样做不希望整个问题由代码组成:)

Answer 1

这里有两个问题：

1. 您定义了诸如 closeWindow 之类的函数，但实际上并未为它们添加事件侦听器。您提到了 onclick 但我在您的代码中看不到这一点。因此第一步是添加 document.querySelector('.closeWindow').addEventListener('click', closeWindow)。

2. 您使整个标题栏可拖动，包括按钮。这意味着按钮的作用也是一个可拖动区域，因此当您单击它们时，您将开始拖动操作，而不是发送单击事件。因此，解决方案是确保按钮区域不具有-webkit-app-region：drag样式，但只有留给它们的区域具有。这可能需要您稍微重新设计标题栏的 HTML 布局，因为这对于整个网格来说效果不佳。

有关更多详细信息，请参阅本教程< /a>.