如何检测用户有关退出页面的信息？

I would like to detect when a user is about to exit the page, before they click the back button, and do something - for example display a popup. I do not want to prevent the user from leaving the page, but only to grab their attention again.

我想检测用户何时即将退出页面,然后再单击后退按钮,然后执行某些操作 - 例如显示弹出窗口。我不想阻止用户离开页面,只是为了再次引起他们的注意。

This is already done by Optin Monster, but I want to implement it myself.

这已经由Optin Monster完成,但我想自己实现它。

Where to start?

从哪儿开始?

Edit: beforeunload is fired after the user clicked the back or x button. I would like to catch his exit intent, for example when the mouse is moving towards the back button, but before it was clicked.

编辑:在用户单击后退或x按钮后触发beforeunload。我想捕捉他的退出意图,例如当鼠标朝向后退按钮移动时,但是在它被点击之前。

3 个解决方案

#1

Ouibounce does this. There is a live demo here.

Ouibounce这样做。这里有现场演示。

npm install ouibounce

Then:

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

#2

Here's how you can do it:

以下是您可以这样做的方法:

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

I hope this is what you are looking for. Good luck!

我希望这就是你要找的东西。祝你好运!

#3

The problem I find with these techniques (like the one implemented on Ouibounce or the one proposed by Hristo Georgiev) is they also detect when the mouse enters the window if the cursor is outside the page before page load. It's not a big deal, but it might bring an unwanted behavior. An extra tweak must be done for this solution to work fine. One thing that comes to my mind right know would be to use a flag to check the mouse logic.

我发现这些技术的问题(如在Ouibounce上实现的那个或Hristo Georgiev提出的那个)是它们还检测当鼠标进入窗口时光标是否在页面加载之前在页面之外。这不是什么大不了的事,但它可能带来不必要的行为。必须进行额外的调整才能使此解决方案正常工作。我想到的一件事就是使用一个标志来检查鼠标逻辑。

#1