Как я могу обнаружить пользователя о выходе из страницы?

Я хотел бы обнаружить, когда пользователь собирается выйти из страницы, , прежде чем нажимать кнопку "Назад" , и сделать что-нибудь - например, отобразить всплывающее окно. Я не хочу помешать пользователю покинуть страницу, но только для того, чтобы снова привлечь их внимание.

Это уже сделано Optin Monster, но я хочу реализовать его сам.

С чего начать?

Изменить: beforeunload запускается после, пользователь нажал кнопку "Назад" или "x". Я хотел бы поймать его цель выхода, например, когда мышь движется к кнопке "Назад" , но до ее нажатия.

Ответ 1

Ouibounce делает это. Здесь есть живая демонстрация.

npm install ouibounce

Тогда:

var ouibounce = require('ouibounce');
var modal = document.getElementById('ouibounce-modal')
ouibounce(modal);

Ответ 2

Вот как вы можете это сделать:

$(document).on('mouseleave', leaveFromTop);

function leaveFromTop(e){
    if( e.clientY < 0 ) // less than 60px is close enough to the top
      alert('y u leave from the top?');
}

Надеюсь, это то, что вы ищете. Удачи!

Ответ 3

Проблема, которую я нахожу в этих методах (например, тот, который реализован на Ouibounce или предложенный Христом Георгиевым), также обнаруживает, когда мышь входит в окно, если курсор находится за пределами страницы до загрузки страницы. Это неважно, но это может привести к нежелательному поведению. Для этого решения необходимо сделать дополнительную настройку. Одна вещь, которая приходит мне на ум правильно знать, будет использовать флаг для проверки логики мыши.