Javascript : Détecter quand un utilisateur a l'intention de quitter une page web

MouseLeave event

Vous pouvez détecter quand l'utilisateur sort le curseur de la page en utilisant événement mouseleave sur l'élément body de la page.

const mouseTarget = document.getElementById('page');
mouseTarget.addEventListener('mouseleave', e => {...});

Cet événement s'activera même si l'utilisateur sort dans le bas de l'écran pour cliquer sur la barre des tâches par exemple.

Si vous voulez détecter quand l'utilisateur dirige sa souris sur la barre du haut de son navigateur, il suffit de soustraire le défilement de la page à la position de la souris et de tester si la valeur est inférieur ou égale à 0.

const mouseTarget = document.getElementById('page');

mouseTarget.addEventListener('mouseleave', e => {
   /* on soustrait le defilement de la page pour obtenir la vraie position du curseur */
   if (e.pageY - window.scrollY <= 0) {
      console.log("L'utilisateur tente de sortir de la page.");
   }
});

On pourrait ajouter un booléen pour savoir si l'utilisateur a déjà vu la fenêtre modale et éviter de répéter une réouverture.

Before Unload

Un autre événement très utile est beforeunload. Cet événement vous permet de détecter quand l'utilisateur ferme l'onglet de votre page web.

Cet événement peut servir pour demander confirmation à l'aide d'une boîte de dialogue avant de quitter la page, pour éviter une perte de données par exemple.

Depuis quelque temps l'événement beforeunload a été restreint par les nouveaux navigateurs pour combattre les pop-up et autre méthode abusive que l'on pouvait trouver sur le web.

Pour que le navigateur affiche une boîte de dialogue, il faudra que l'utilisateur est cliqué une fois sur la page sinon, l'alerte sera ignorée.

De plus, notez que les méthodes alert(), prompt() et confirm() ne fonctionnera pas.

Enfin, les navigateurs modernes ne permettent plus de modifier le message affiché dans la boîte de dialogue (pour éviter les abus).

window.addEventListener("beforeunload", function (e) {

   /* Pour que cette action soit annulée il faut au moins un clic de l'utilisateur sur la page */

   /* Annule l'action */
   e.preventDefault();

   /* Vous ne pouvez pas appeler alert() ou confirm() ou prompt() */
   alert("Cette alerte ne s'affichera pas !");
   confirm("Cette boîte de dialogue ne s'affichera pas !");
   prompt("Cette boîte de dialogue ne s'affichera pas !");


   /* Un modal s'affichera seulement après le message générique du navigateur */
   console.log("Affichage de la fenêtre modale.");

   /* Chrome a besoin de returnValue 
   Vous pouvez mettre le message ici.
   Pour les navigateurs modernes, un message générique sera affiché */
   e.returnValue = '';
});

Script complet et conclusion

Voici le code complet :

const mouseTarget = document.getElementById('page');

mouseTarget.addEventListener('mouseleave', e => {
   /* on soustrait le defilement de la page pour obtenir la vraie position du curseur */
   if (e.pageY - window.scrollY <= 0) {
      console.log("L'utilisateur tente de sortir de la page.");
   }
});

window.addEventListener("beforeunload", function (e) {

   /* Pour que cette action soit annulée il faut au moins un clic de l'utilisateur sur la page */

   /* Annule l'action */
   e.preventDefault();

   /* Vous ne pouvez pas appeler alert() ou confirm() ou prompt() */
   alert("Cette alerte ne s'affichera pas !");
   confirm("Cette boîte de dialogue ne s'affichera pas !");
   prompt("Cette boîte de dialogue ne s'affichera pas !");


   /* Un modal s'affichera seulement après le message générique du navigateur */
   console.log("Affichage de la fenêtre modale.");

   /* Chrome a besoin de returnValue 
   Vous pouvez mettre le message ici.
   Pour les navigateurs modernes, un message générique sera affiché */
   e.returnValue = '';
});

Enfin, n'oubliez pas que la meilleure manière pour que les utilisateurs restent sur votre page, c'est de proposer un bon contenu !