我們如何可靠地偵測瀏覽器後退按鈕按下並將其與頁內後退按鈕操作區分開來？

實作跨瀏覽器瀏覽器後退按鈕偵測

偵測後退按鈕按下事件

確定使用者是否按下了瀏覽器後退按鈕是一個挑戰。許多人建議使用 window.onhashchange 函數，但它也會回應頁內後退按鈕，從而對使用者體驗產生不利影響。

管理頁內後退按鈕功能

對於單頁應用程式利用雜湊導航，控制頁內後退按鈕的行為至關重要。為此，請使用一個陣列 (window.location.lastash) 來儲存使用者導航介面時先前的雜湊值。

區分瀏覽器後退按鈕與頁內後退按鈕

傳統方法，例如window.onbeforeunload 和 window.onmousedown 被證明對於區分瀏覽器後退按鈕點擊無效。相反，設計了一個由文件的 onmouseover（當滑鼠懸停在文件上時）和 onmouseleave（當滑鼠退出文件時）切換的標誌變數。

利用偵測機制

修改 window.onhashchange合併此邏輯：

window.onhashchange = function() {
    if (window.innerDocClick) {
        // In-page mechanism triggered the hash change
    } else {
        if (window.location.hash != '#undefined') {
            // Browser back button clicked
            goBack();
        }
    }
}

防止 Backspace 模仿Back按鈕

為了防止退格鍵觸發後退按鈕事件，請實現以下腳本：

$(function(){
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

綜上所述，透過利用文件的懸停事件，可以有效區分瀏覽器後退按鈕的點擊以及頁內後退按鈕的使用，可以精確控制後退按鈕的功能。

以上是我們如何可靠地偵測瀏覽器後退按鈕按下並將其與頁內後退按鈕操作區分開來？的詳細內容。更多資訊請關注PHP中文網其他相關文章！