除非单击提交按钮，否则离开页面警报

Question

如果用户试图在订单完成之前以任何方式离开订单流程，我希望实施一个警告，当然除了在付款按钮之后。

类似这样的：

<script type="text/javascript">
window.onbeforeunload = function(){
return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
};
if document.getElementsByClassName('eStore_buy_now_button').onclick = function(){
};
</script>

我确信这在某些方面是有害的，但这是我可以说明我正在尝试的最佳方式。而且我知道有些浏览器会显示默认文本而不是我写的实际警告，这很好。

一些注意事项，我宁愿使用普通的旧 JS 而不是加载 jQuery 来完成这一项简单的任务。页面没有设置，是一个简单的离开页面或者点击“立即购买”操作。

更新：

我向您保证，这不是为了我，而是为了用户。尽管已经明确解释了（做什么），但我认为用户在该过程真正完成之前出于即时满足而匆忙离开，忽略消息的心态。这是一个简单的两步过程，他们提交项目的详细信息，然后付款。无论出于何种原因，他们都在提交详细信息，然后大约 50% 的时间没有完成付款。然后他们会跟进“那么，你是在做这个项目还是在做什么？”然后我必须解释“你从来没有完成你的订单”。他们接着说“哎呀，你走吧。”

不幸的是，我将其归为营销和网页设计 101。规则 #1，人们是愚蠢的。不要被粗鲁或悲观地理解。基本上，这个想法是假设每个人在你的设计和指导上都是愚蠢的，这样你就可以做出一个 5 岁的孩子可以做到的简单事情。我完全同意不将用户作为人质。但是这个页面只能在他们发起的预定订单过程的中间到达（这个页面永远不会以浏览的方式到达）。因此，我认为这是一个非常合理的用例，您可以在其中避免自己的常见用户错误。不精通技术的客户群体，因此他们确实需要此类指导。

Answer 1

document.querySelector('.eStore_buy_now_button').addEventListener("click", function(){
    window.btn_clicked = true;      //set btn_clicked to true
});

window.onbeforeunload = function(){
    if(!window.btn_clicked){
        return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
    }
};

这将在页面卸载（例如离开页面）时提醒用户，直到 btn_clicked 设置为 true。

演示：http://jsfiddle.net/DerekL/GSWbB/show/

Answer 2

别这样。

在可用性方面有一条细线 - 一方面，有时我可能打算下订单但不小心离开了页面；另一方面，它可能很快就会变得烦人。当浏览器设置为保存上一个会话（即在下次启动时重新打开选项卡）并且一个页面以这种方式运行时，您最终会仅下一次重新打开该选项卡（在 Mac Safari 上确认)，丢弃其余的选项卡。他们不会再向您购买了！

我建议您通过内联消息向用户明确表示订单尚未提交，他们仍需要确认他们的操作，但如果他们不小心导航离开，您应该轻松地从他们离开的地方继续。将此类信息存储在 cookie 中相当简单，以便在后续页面访问时提示用户“您的订单不完整，您想现在完成吗？”

作为替代方案，如果用户分心，您可以使用不活动警报（想想在线银行会在您的会话即将到期时提示您）将用户带回到“完成订单”页面。

如果您确定要依赖此事件，this question 的答案可能会提供更好的见解。基本上，不应依赖基本文本警告之外的功能或其实现，因为跨浏览器的实现不一致 (?) 以及被用户阻止的可能性。

另一个更新：

在 Derek 对 Gmail 等使用的这种方法的评论的提示下，我遇到了 an article 建议您坚持使用 onunload 并依靠 AJAX 调用来保存页面的状态 - 这支持了我的想法即使从未触发过 javascript 事件，也允许用户从离开的地方继续前进。