如何检测用户即将退出页面？

Question

我希望能够检测到用户即将离开页面，在他们点击后退按钮之前做点什么-例如显示弹出窗口。 我不想阻止用户离开页面，只是想再次引起他们的注意。

这已经被Optin Monster实现了，但我想自己实现它。

从哪里开始？

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

- Tzach

---

这可能会很棘手，如果不是不可能的话。首先，浏览器的返回按钮超出了加载在其中的文档范围，因此文档无法检测到浏览器 chrome 上的 hover 等事件。理论上，您可以尝试根据鼠标指针从文档到浏览器 chrome 的移动（如方向和速度）来猜测，但这很靠不住，在跨浏览器时存在问题，而且最多只能算是 hacky。此外，我只需按下键盘上的 BKSP，就可以实现相同的效果，有效地规避了您的“退出意图”检测。 - Richard Neil Ilagan

可能会用到 https://github.com/carlsednaoui/ouibounce 但仅绑定窗口的mouseleave事件可能就足够了，个人看法。 - A. Wolff

你们听说过 .mousemove() 吗？ - Hristo Georgiev

有时候我希望我能够投票关闭问题，仅仅因为它是一个可怕的想法，永远不应该被实现。 - Blazemonger

您可以以100％的准确度跟踪单击"返回"按钮，而无需使用鼠标移动。通过将浏览器历史记录零状态（如果用户从其他域输入站点）替换为您的自定义URL，可能是当前URL与一些GET参数，这将触发某些模式。并监听popstate。即使浏览器不支持历史状态，只要使用非常hacky的版本也可以实现相同的结果。我已编写并实施了此功能。 - Kristapsv

Answer 1

Ouibounce可以实现此功能。这里有一个在线演示。

npm install ouibounce

那么：

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

- A. Wolff

---

我已经使用过它。它运行得非常好。 - Martin Schlagnitweit

这是针对模态框的，根据谷歌于2017年1月10日实施的新插页式惩罚规则，可能会受到惩罚（取决于谷歌如何实施，延迟插页式可能适用，但不一定适用于退出插页式）。 - Goose

@Goose 这只适用于移动插页式广告，而对于离开/退出意图则不是这种情况。 - Eduardo Almeida

Brave阻止了脚本。 - Post Self

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

我希望这是你想要的。祝你好运！

- Hristo Georgiev

---

你的代码实际上是检查右下角。 - Tzach

这似乎会在Windows 7上的IE 10/11上引起问题，因为屏幕的每一侧都返回-1。 - Josh.S

Answer 3

我发现这些技术（比如Ouibounce实现的技术或者Hristo Georgiev提出的技术）存在一个问题，就是它们也会在页面加载前检测到鼠标是否在页面外部。这并不是什么大问题，但可能会带来一些不必要的行为。为了使这种解决方案正常工作，必须进行额外的调整。我现在想到的一个方法是使用一个标志来检查鼠标逻辑。

- Ernesto Hegi

---

在我的实现中，我确实进行了检查。给予加分的建议。 - Tzach

在Hristo的回答中，我没有理解你提到的行为。 - Goose