如何检测用户退出页面？ [关闭]答案

【问题标题】：How can I detect a user about the exit the page? [closed]如何检测用户退出页面？ [关闭]
【发布时间】：2014-07-23 21:02:44
【问题描述】：

我想检测用户何时将要退出页面，在他们点击后退按钮之前，并做一些事情 - 例如显示一个弹出窗口。我不想阻止用户离开页面，只是为了再次吸引他们的注意力。

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

从哪里开始？

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

【问题讨论】：

这将是棘手的，如果不是不可能的话。一方面，浏览器的后退按钮超出了其中加载的文档的范围，因此文档无法（？）检测浏览器 chrome 上的 hover 之类的事件。从理论上讲，您可以尝试根据鼠标指针从文档到浏览器 chrome 的移动（如方向和速度）进行猜测，但这是粗略的、有问题的跨浏览器，并且充其量是 hacky。此外，我只需按键盘上的BKSP，它就会做同样的事情，有效地绕过你的“退出意图”检测。
@RichardNeilIlagan 这是正确的方向。我想知道是否有一个插件可以做到这一点..
github.com/carlsednaoui/ouibounce 也许但是仅仅绑定一个窗口 mouseleave eveznt 就足够了恕我直言
stackoverflow.com/questions/14543245/…的可能重复
@Tzach ~ 我会争辩“正确的方向”，但为了幽默，不，我没有听说过。

标签： javascript jquery html back

【解决方案1】：

你可以这样做：

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

我希望这是您正在寻找的。祝你好运！

【讨论】：

您的代码实际上检查右下角..
这似乎会导致 Windows 7 上的 IE 10/11 出现问题，因为屏幕的每一侧都返回 -1

【解决方案2】：

Ouibounce 这样做。有一个live demo here。

npm install ouibounce

然后：

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

【讨论】：

我用过。效果很好
这是特定于模态广告的，可能会根据 2017 年 1 月 10 日的新插页式广告受到谷歌的处罚（取决于谷歌如何实施它，适用于延迟插页式广告但不一定退出插页式广告。 )
@Goose 仅适用于移动插页式广告，而不是离开/退出意图的情况。
勇敢的阻止脚本

【解决方案3】：

我发现使用这些技术（例如在 Ouibounce 上实现的技术或 Hristo Georgiev 提出的技术）的问题是，如果在页面加载之前光标位于页面之外，它们还会检测鼠标何时进入窗口。这没什么大不了的，但它可能会带来不受欢迎的行为。必须进行额外的调整才能使此解决方案正常工作。我想到的一件事是使用标志来检查鼠标逻辑。

【讨论】：

小费+1。在我的实现中，我确实检查了这一点。
在 Hristo 的回答中，我没有得到你提到的行为。