如何防止通過瀏覽器按鈕導航，但不通過鏈接？

Question

我想，如果他們關閉瀏覽器或使用瀏覽器using the following javascript的歷史記錄按鈕離開頁面提醒用戶：

window.onbeforeunload = function(e) { 
    return 'Ask user a page leaving question here'; 
}; 

但不管這是我在我的網站鏈接和按鈕應該工作。我怎樣才能做到這一點？

Answer 1

，想到的第一個辦法是設置一個變量，它會告訴你是否點擊一個鏈接：

var linked = false; 

window.onbeforeunload = function(e) { 
    if (!linked) 
     return 'Ask user a page leaving question here'; 
}; 

document.addEventListener('click', function(e) { 
    if (e.target.tagName === "A") 
     linked = true; 
}, false); 

也就是說，設置在文檔級別Click事件處理程序，即測試是否點擊的元素是一個錨點（或任何你想允許的），如果是這樣的話設置變量。 （很顯然，這假設您沒有其他錨點元素點擊處理程序在較低級別停止事件傳播。）

Answer 2

var linkClicked = false; 
window.onbeforeunload = function(e) { 
    if (!linkClicked){ 
     linkClicked = false; 
     return 'Ask user a page leaving question here'; 
    } 
}; 

$(document).ready(function(){ 
    $('a').click(function(e){ 
     linkClicked = true; 
    }); 
}); 

顯然，這依賴於jQuery來的事件處理程序添加到所有鏈接，但你可以用任何其他方法附加處理程序，包括添加onclick="linkClicked=true;"到頁面上的每一個環節，如果你真的不得不這樣做。

編輯：

只是想指出的是，如果用戶點擊一個鏈接，並沒有對它們進行重定向（例如哈希標籤鏈接到別的地方的頁面，或東西，返回false上/阻止默認行動正在執行），那麼這將設置linkClicked爲true，隨後任何基於瀏覽器的導航將不會被捕獲。

如果你想抓住這一點，我會建議設置鏈接超時單擊像這樣：

$(document).ready(function(){ 
    $('a').click(function(e){ 
     linkClicked = true; 
     setTimeout(function(){ 
      linkClicked = false; 
     }, 500); 
    }); 
}); 

這將使窗口卸載事件半秒鐘重新設置標誌，使之前觸發未來的導航事件被正確捕獲。這仍然不是完美的，但它可能不需要。

Answer 3

您可以使用window.onbeforeunload事件。

var check= false; 

window.onbeforeunload = function() { 
    if (!check) { 
    return "Are you sure you want to leave this page?" 
    } 
} 

function CheckBackButton() { 
    check= true; 
} 



referenceElement.addEventListener('onClick', CheckBackButton(), false); 

Answer 4

我們確認提示否？ 是這樣的？ Intercept page exit event

window.onbeforeunload = function (e) { 
    var message = "Your confirmation message goes here.", 
    e = e || window.event; 
    // For IE and Firefox 
    if (e) { 
    e.returnValue = message; 
    } 

    // For Safari 
    return message; 
}; 

Answer 5

How to show the 「Are you sure you want to navigate away from this page?」 when changes committed?這可能會解決你的問題