无法单击标题栏中的按钮（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

这里有两个问题：

您定义了类似 closeWindow 的函数，但实际上并没有为它们添加事件侦听器。你提到 onclick 但我在你的代码中看不到它。所以第一步是添加 document.querySelector('.closeWindow').addEventListener('click', closeWindow) .
您使整个标题栏都可以拖动，包括按钮。这意味着按钮的作用也是一个可拖动区域，所以当你点击它们时，你开始拖动操作而不是发送点击事件。因此，解决方案是确保按钮区域 而不是 具有 -webkit-app-region: drag 样式，但只有留给它们的区域具有。这可能需要您稍微重新设计标题栏的 HTML 布局，因为这对于 grid.
的整个内容来说效果不佳。

有关详细信息，请参阅 this tutorial。

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

Can't click buttons in the title bar (Electron App)

javascript

text-editor

node.js

electron