我们如何可靠地检测浏览器后退按钮按下并将其与页内后退按钮操作区分开来？

实现跨浏览器浏览器后退按钮检测

检测后退按钮按下事件

确定用户是否按下了浏览器后退按钮是一个挑战。许多人建议使用 window.onhashchange 函数，但它也会响应页内后退按钮，从而对用户体验产生不利影响。

管理页内后退按钮功能

对于单页应用程序利用哈希导航，控制页内后退按钮的行为至关重要。为此，请使用一个数组 (window.location.lasthash) 来存储用户导航界面时先前的哈希值。

区分浏览器后退按钮与页内后退按钮

传统方法，例如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 Button

要防止退格键触发后退按钮事件，请实现以下脚本：

$(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中文网其他相关文章！