Comment puis-je détecter de manière fiable les pressions sur le bouton Précédent du navigateur dans différents navigateurs ?

Détection des événements du bouton Précédent du navigateur dans les navigateurs

La détection du comportement du bouton Précédent du navigateur présente des défis en raison de sa nature asynchrone. Bien que certaines méthodes existent, telles que l'utilisation de window.onhashchange, elles ne parviennent pas à faire la différence entre les éléments de la page déclenchant des modifications de hachage et la pression réelle sur le bouton de retour.

Application de l'utilisation du bouton de retour dans la page

Dans les applications d'une seule page reposant sur la navigation par hachage, il est crucial de réguler la fonctionnalité du bouton de retour. En utilisant un bouton de retour sur la page qui modifie le hachage, vous pouvez garder le contrôle de la navigation.

Découverte des pressions sur le bouton de retour du navigateur

Pour détecter avec précision les événements du bouton de retour du navigateur , envisagez une approche multiplateforme en survolant la souris et en laissant les événements sur le document.

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
    }
}

Cette méthode définit un indicateur booléen (window.innerDocClick) pour indiquer si le curseur se trouve dans la zone du document. Si le hachage change alors que l'indicateur est faux, cela suggère d'appuyer sur le bouton de retour du navigateur.

Empêcher le retour arrière de déclencher un événement de retour

Pour empêcher la touche de retour arrière d'activer le bouton retour, utilisez le code jQuery suivant :

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

Ce code intercepte les pressions arrière et les empêche de déclencher l'événement du bouton retour si le focus n'est pas sur un champ de saisie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!