onbeforeunload 事件不會在瀏覽器按鈕點擊時觸發，而是在 CMD+R/F5 上工作

Question

我確定我錯過了一些相對簡單的東西 - 但對於我的生活，我找不到答案。 嘗試在react進行重新加載預防時，當我按下瀏覽器菜單 (Chrome) 中的重新加載按鈕時，我的onbeforeunload功能不會觸發。 如果我按 CMD+R/F5 並且一旦完成它就可以工作 - 瀏覽器按鈕也會觸發該功能。 如果我嘗試先單擊重新加載，它根本不起作用。 此外，如果我瀏覽路由器一次，它似乎也注冊了。 我正在使用以下代碼在我的頂級模板上注冊刷新：

class Template extends React.Component {
    constructor(props) {
        super(props);
    }

    refreshPrevent = (e) => {
        e.preventDefault();
        e.returnValue = true;
    }

    componentDidMount() {
        console.log("registering refresh handlers");
        window.addEventListener("beforeunload", this.refreshPrevent );
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", this.refreshPrevent);
    }

任何想法，將不勝感激。

Answer 1

我在您的代碼中沒有看到任何錯誤。 我在我的react應用程序中使用了類似的代碼，但在您發布之前我還沒有測試過這個特定問題。

根據 MDN 文檔，這種行為似乎是正常的：

為了消除不需要的彈出窗口，某些瀏覽器不會顯示在 beforeunload 事件處理程序中創建的提示，除非頁面已與該頁面交互。 此外，有些根本不顯示它們。

因此，當您的應用首次加載時，在您以某種方式與頁面交互之前，您可以點擊瀏覽器刷新按鈕，並且根據瀏覽器的不同，頁面將重新加載而不顯示提示。

但是，一旦您使用鼠標或鍵盤或通過觸摸在頁面上完成了某些操作，就會顯示提示。

MDN 文檔總結（強調）：

還要注意，各種瀏覽器會忽略事件的結果，根本不要求用戶確認。 在這種情況下，文檔將始終自動卸載。 Firefox 在 about:config 中有一個名為 dom.disable_beforeunload 的開關來啟用此行為。 從 Chrome 60 開始，如果用戶自加載后沒有在框架或頁面中執行手勢，則確認將被跳過。

這符合我們應該期望某些情況下的規范，例如未與頁面交互加刷新，跳過提示用戶：

如果用戶代理認為這樣做會很煩人、具有欺騙性或毫無意義，則鼓勵用戶代理避免要求用戶進行確認。 一個簡單的啟發可能是，如果用戶沒有與文檔交互，用戶代理在卸載它之前不會要求確認。