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

时间:2014-06-03 13:37:23

标签: javascript jquery html back

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

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

从哪里开始?

编辑: 在用户点击后退或x按钮后,beforeunload被解雇。我想抓住他的退出意图,例如当鼠标朝后退按钮移动时,但是在它被点击之前。

3 个答案:

答案 0 :(得分:19)

Ouibounce这样做。有live demo here

npm install ouibounce

然后:

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

答案 1 :(得分:16)

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

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

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

答案 2 :(得分:5)

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