js監聽瀏覽器返回事件

最近在微信瀏覽器中做了一個答題活動，需要解決一個中途退出問題，即點擊微信返回按鈕，彈出對話框，根據用戶選擇是否退出執行相應操作。

我找到一個可以監聽瀏覽器返回按鈕的方法：

pushHistory( );

window.addEventListener("popstate",function(e) {

// TODO 在這裡執行顯示彈窗等操作

})

function pushHistory(){

var state={

title: "title",

url: "#"

};

}

大概意思是，添加一條 history 實體作為替代原來的 history 實體，然後監聽popstate事件。這樣的效果是，第一次點擊微信返回按鈕時彈窗出現了；但如果第一次不退出，第二次點擊微信返回按鈕時，則不會出現彈窗，而是直接退出了當前頁面。也就是說，這樣只能監測返回按鈕事件，但並不能阻止返回上一頁的默認事件。

正當我想要向微信瀏覽器做出妥協，準備在彈窗中告知用戶只會彈窗提醒一次的時候，突然想到，既然第一次能有效，那應該

猜測或許有用，但絕對不是解決問題的主要辦法。那我就全面了解一下history相關的內容：

參數：state：存儲一個對象，可以添加相關信息，可以使用 history.state 讀取其中的內容。

title：歷史記錄的標題。

url：創建的歷史記錄的鏈接。進行歷史記錄操作時會跳轉到該鏈接。

6. popstate 事件，history 實體改變時觸發的事件。

這樣看來，最開始的思考方嚮應該沒錯，那為啥只有第一次有效呢？於是，我嘗試著在監聽postState的方法中，又執行了一次pushHistory()方法。居然奇蹟般地ok了~不管點擊幾次返回，只要點擊彈窗中的取消按鈕，都能繼續答題了。

希望這個小問題的解決能給遇到類似問題的朋友一點提示。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！