Wie kann ich das Drücken der Browser-Zurück-Taste in verschiedenen Browsern zuverlässig erkennen?

Ereigniserkennung der Browser-Zurück-Schaltfläche in allen Browsern

Das Erkennen des Verhaltens der Browser-Zurück-Schaltfläche stellt aufgrund ihrer asynchronen Natur eine Herausforderung dar. Es gibt zwar einige Methoden, wie z. B. die Verwendung von window.onhashchange, diese unterscheiden jedoch nicht zwischen In-Page-Elementen, die Hash-Änderungen auslösen, und dem tatsächlichen Drücken der Zurück-Schaltfläche.

Erzwingen der Verwendung der In-Page-Zurück-Schaltfläche

In Einzelseitenanwendungen, die auf Hash-Navigation basieren, ist es wichtig, die Funktionalität der Zurück-Schaltfläche zu regulieren. Durch die Verwendung einer In-Page-Zurück-Schaltfläche, die den Hash ändert, können Sie die Kontrolle über die Navigation behalten.

Erkennen von Browser-Zurück-Tastendrücken

Um Ereignisse der Browser-Zurück-Taste genau zu erkennen Ziehen Sie einen plattformübergreifenden Ansatz in Betracht, bei dem Sie mit der Maus darüber fahren und Ereignisse im Dokument belassen.

document.onmouseover = function() {
    // User's cursor is within the document area
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    // User's cursor has exited the document area
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        // Navigation triggered by in-page action
    } else {
        // Browser back button was pressed
    }
}

Diese Methode setzt ein boolesches Flag (window.innerDocClick), um anzugeben, ob sich der Cursor innerhalb des Dokumentbereichs befindet. Wenn sich der Hash ändert, während das Flag falsch ist, deutet dies auf das Drücken der Zurück-Taste des Browsers hin.

Verhindern, dass die Rücktaste ein Back-Ereignis auslöst

Um zu verhindern, dass die Rücktaste das aktiviert Zurück-Taste verwenden Sie den folgenden jQuery-Code:

$(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();
            }
        }
    });
});

Dieser Code fängt das Drücken der Rücktaste ab und verhindert, dass sie das Zurück-Tasten-Ereignis auslösen, wenn Der Fokus liegt nicht auf einem Eingabefeld.

Das obige ist der detaillierte Inhalt vonWie kann ich das Drücken der Browser-Zurück-Taste in verschiedenen Browsern zuverlässig erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!