問題描述

我希望在 Electron 應用中捕捉點擊應用窗口關閉按鈕的事件.

I wish to catch the event of clicking the app window's close button in Electron app.

我正在嘗試為 Mac OSX 開發 Electron 應用程序.我想隱藏應用程序窗口，而不是像其他 Mac 應用程序一樣在用戶單擊窗口的關閉按鈕時終止應用程序.

I'm trying to develope Electron app for Mac OSX. I want to hide the app window, not to terminate the app when a user clicks the window's close button like other Mac apps.

但是，我無法檢測到系統應該終止還是應該隱藏，因為在任何情況下，browser-window 的 close 事件都會被調用單擊關閉按鈕，關閉操作系統或使用退出命令終止應用程序，Cmd+Q.

However, I can not detect wether the system should be terminated or it should be hidden, because in any case, a close event of browser-window is called when a close button is clicked, the OS is shut down or the app is terminated with quit command, Cmd+Q.

有什么方法可以捕捉到在 Electron 應用中點擊應用窗口關閉按鈕的事件?

Is there any way to catch the event of clicking the app window's close button in Electron app?

感謝您的幫助.

為了檢測點擊關閉按鈕的事件，我嘗試了這段代碼

To detect the event of clicking a close button, I tried this code

var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');

var force_quit = false;

var menu = Menu.buildFromTemplate([
  {
    label: 'Sample',
    submenu: [
      {label: 'About App', selector: 'orderFrontStandardAboutPanel:'},
      {label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() {force_quit=true; app.quit();}}
    ]
  }]);

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

app.on('ready', function(){

    Menu.setApplicationMenu(menu);

    mainWindow = new BrowserWindow({width:800, height:600});

    mainWindow.on('close', function(e){
        if(!force_quit){
            e.preventDefault();
            mainWindow.hide();
        }
    });

    mainWindow.on('closed', function(){
        console.log("closed");
        mainWindow = null;
        app.quit();
    });

    app.on('activate-with-no-open-windows', function(){
        mainWindow.show();
    });
});

使用此代碼，當單擊應用程序窗口的關閉按鈕時應用程序被隱藏，而當鍵入 Cmd+Q 時應用程序被終止.但是，當我嘗試關閉操作系統時，會阻止關閉事件.

With this code, the app is hidden when a close button of the app window is clicked, and the app is terminated when Cmd+Q is typed. However, when I try to shut down the OS, the shutdown event is prevented.

推薦答案

你可以使用 close 事件來捕捉它電子/blob/master/docs/api/browser-window.md#event-close" rel="noreferrer">瀏覽器窗口 api.您可以嘗試以下方法來驗證這一點...

You can catch it by using the close event of the browser-window api. You can try the following to verify this...

var app = require('app');

var force_quit = false;

app.on('ready', function () {        
    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    mainWindow.on('close', function() { //   <---- Catch close event

        // The dialog box below will open, instead of your app closing.
        require('dialog').showMessageBox({
            message: "Close button has been pressed!",
            buttons: ["OK"]
        });
    });
});

更新:

要分離功能，您可以執行以下操作...

Update:

To separate functionality you can do the following...

var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');

var force_quit = false;
var menu = Menu.buildFromTemplate([
{
    label: 'Sample',
    submenu: [
        {label: 'About App', selector: 'orderFrontStandardAboutPanel:'},
        {
            label: 'Quit', 
            accelerator: 'CmdOrCtrl+Q', 
            click: function() { 
                force_quit=true; app.quit();
            }
        }
    ]
}]);

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

app.on('ready', function(){

    Menu.setApplicationMenu(menu);

    mainWindow = new BrowserWindow({width:800, height:600});

    // Continue to handle mainWindow "close" event here
    mainWindow.on('close', function(e){
        if(!force_quit){
            e.preventDefault();
            mainWindow.hide();
        }
    });

    // You can use 'before-quit' instead of (or with) the close event
    app.on('before-quit', function (e) {
        // Handle menu-item or keyboard shortcut quit here
        if(!force_quit){
            e.preventDefault();
            mainWindow.hide();
        }
    });

    // Remove mainWindow.on('closed'), as it is redundant

    app.on('activate-with-no-open-windows', function(){
        mainWindow.show();
    });
});

// This is another place to handle events after all windows are closed
app.on('will-quit', function () {
    // This is a good place to add tests insuring the app is still
    // responsive and all windows are closed.
    console.log("will-quit");
    mainWindow = null;
});

以上代碼使用before-quit 事件處理程序 處理應用程序 api 上的應用程序關閉"事件.瀏覽器窗口關閉"事件仍由 mainWindow.on('close') 在瀏覽器窗口 api 上處理.

The above code uses the before-quit event handler to handle app "close" events on the app api. Browser-window "close" events are still handled on the browser-window api by mainWindow.on('close').

此外，will-quit 事件是在應用完全關閉之前測試問題的更好地方.

Additionally, the will-quit event is a better place to test for problems before the app closes completely.

這篇關于如何在 Electron 應用程序中捕獲單擊應用程序窗口關閉按鈕的事件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！