上傳頁面使用者開始上傳檔案之後使用者點選任意跳轉都需要彈出提示層進行二次確定才允許他進行跳轉，這樣做的目的是為了防止使用者的錯誤操作導致這珍貴的UGC 流失(通常使用者在一次上傳不成功之後，很容易就會打消了上傳的念頭的了，或去到其他平臺進行上傳)。

在這裡用到的是 onbeforeunload 事件。下面就梳理下 onunload、onbeforeunload 這兩個事件

onunload，onbeforeunload都是在重新整理或關閉時呼叫，可以在<script>指令碼中通過 window.onunload來呼叫。區別在於onbeforeunload在onunload之前執行，它還可 以阻止onunload的執行。

onbeforeunload 是正要去伺服器讀 取新的頁面時呼叫，此時還沒開始讀取；而onunload則已經從伺服器上讀到了需要載入的新的頁面，在即將替換掉當前頁面時呼叫。

onunload事件

瀏覽器解除安裝頁面後執行的事件, 雖然網上的資料沒說什麼相容性的問題，但是實踐發現相容性並不理想。

使用方法

//JS document
window.onunload = function(){
alert("unload is work");
}

瀏覽器相容情況

IE6，IE7，IE8 中 重新整理頁面、關閉瀏覽器之後、頁面跳轉之後都會執行；

IE9 重新整理頁面 會執行，頁面跳轉、關閉瀏覽器不能執行；

firefox(包括firefox3.6)

Safari 重新整理頁面、頁面跳轉之後會執行，但關閉瀏覽器不能執行；

Opera、Chrome 任何情況都不執行。

onbeforeunload事件

頁面跳轉時觸發的事件。

使用方法

//JS document
window.onbeforeunload = function(){
return "onbeforeunload is work";
}

return 的值 為你需要告訴使用者的提示資訊如上面demo的話瀏覽器的提示是這樣(firefox 並不支援文字提醒)：

值得注意的是，網上流傳說 可以通過檢查 e.clientX e.clientY 判斷 使用者是否點選 右上角關閉瀏覽器的，但是實踐發現 只有 IE6，IE7，IE8 能獲取得到具體數值，其他瀏覽器均為 undefined。

瀏覽器相容情況

IE、Chrome、Safari 完美支援

Firefox 不支援文字提醒資訊

Opera 不支援

IE6,IE7 使用 onbeforeunload 遇到的bug

凡是 <a> 標籤 都會觸發 onbeforeunload事件 包括 href=”javascript:void(0)” 這種。

在IE6，IE7 下面 點選 裡面的 a 標籤，蛋疼的事情就發生了。

解決方法：給這 a標籤的 父級 新增 onclick=function(){return false} 即可，不過添加了這個之後 要確保 父級裡面沒有 input type=”checkbox” 的標籤，否則會導致其無效不可點選。