Wie können wir das Drücken der Browser-Zurück-Taste zuverlässig erkennen und sie von Aktionen der In-Page-Zurück-Taste unterscheiden?

Implementieren einer browserübergreifenden Browser-Zurück-Tastenerkennung

Erkennen von Ereignissen beim Drücken der Zurück-Taste

Bestimmen, ob der Benutzer die Zurück-Taste des Browsers gedrückt hat, stellt eine Herausforderung dar . Viele schlagen die Verwendung der window.onhashchange-Funktion vor, diese reagiert jedoch auch auf In-Page-Zurück-Schaltflächen, was sich negativ auf die Benutzererfahrung auswirkt.

Funktionalität der In-Page-Zurück-Schaltfläche verwalten

Für Einzelseitenanwendungen Bei der Hash-Navigation ist es wichtig, das Verhalten der In-Page-Zurück-Schaltflächen zu steuern. Verwenden Sie dazu ein Array (window.location.lasthash), um vorherige Hashes zu speichern, während der Benutzer durch die Benutzeroberfläche navigiert.

Unterscheidung der Browser-Zurück-Schaltfläche von der In-Page-Zurück-Schaltfläche

Konventionelle Methoden wie window.onbeforeunload und window.onmousedown erwiesen sich als unwirksam, um Browser-Zurück-Button-Klicks zu unterscheiden. Stattdessen wurde eine Flag-Variable entwickelt, die durch onmouseover (wenn die Maus über das Dokument bewegt wird) und onmouseleave (wenn die Maus das Dokument verlässt) umgeschaltet wird.

Nutzung des Erkennungsmechanismus

Ändern Sie window.onhashchange um diese Logik zu integrieren:

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

Verhindern, dass die Rücktaste die Rücktaste nachahmt Schaltfläche

Um zu verhindern, dass die Rücktaste das Zurück-Schaltflächenereignis auslöst, implementieren Sie das folgende Skript:

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

Zusammenfassend kann man durch die Verwendung der Hover-Ereignisse des Dokuments effektiv zwischen Browser-Zurück-Schaltflächenklicks unterscheiden und die Verwendung der Zurück-Schaltfläche auf der Seite, was eine präzise Steuerung der Funktionalität der Zurück-Schaltfläche ermöglicht.

Das obige ist der detaillierte Inhalt vonWie können wir das Drücken der Browser-Zurück-Taste zuverlässig erkennen und sie von Aktionen der In-Page-Zurück-Taste unterscheiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!