Javascript 除非点击提交按钮，否则离开页面警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11075666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leave Page Alert Unless Submit Button Clicked
提问by u283863
I'm looking to implement a warning if the user attempts to leave the order process before it's completed in any fashion other then of course following the payment button.
如果用户尝试在订单流程以任何方式完成之前离开订单流程，我希望实施警告，当然，当然是按照付款按钮。
Something like this:
像这样的东西：
<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>
I'm sure that's detrimentally wrong in a few ways, but it's the best way I can illustrate what I'm trying. And I understand some browsers will display default text instead of the actual warning I've written, that's fine.
我确信这在某些方面是严重错误的，但这是我可以说明我正在尝试的最佳方式。而且我知道有些浏览器会显示默认文本而不是我写的实际警告，这很好。
A few notes, I'd rather use plain old JS instead of loading up jQuery for just this one simple task. There are no settings on the page so it's a simple leave page or click "Buy Now" operation.
一些注意事项，我宁愿使用普通的旧 JS 而不是为这个简单的任务加载 jQuery。页面上没有设置所以它是一个简单的离开页面或点击“立即购买”操作。
UPDATE:
更新：
I assure you it's not for my sake, it's for the user's sake. Although it's explicitly explained (what to do), I think user's are jumping the gun and leaving before the process is truly finished out of an instant gratification, ignore the messages kind of mentality. It's a simple 2-step process, they submit the details for the project and then make payment. For whatever reason they're submitting details and then not following through with payment about 50% of the time. And then they'll follow up "So, are you working on the project or what?" and then I have to explain "You never finished your order." They follow up with a "Whoops, here ya go."
我向你保证，这不是为了我，而是为了用户。尽管已经明确说明（该怎么做），但我认为用户在过程真正完成之前出于即时满足而跳枪并离开，忽略消息的心态。这是一个简单的两步过程，他们提交项目的详细信息，然后付款。无论出于何种原因，他们都在提交详细信息，然后在大约 50% 的时间里没有完成付款。然后他们会跟进“那么，你是在做这个项目还是什么？” 然后我必须解释“你从来没有完成你的订单。” 他们接着说：“哎呀，你去吧。”
Unfortunately, I would chalk this up as marketing and web design 101. Rule #1, people are dumb. Not to be taken in a rude or pessimistic sense. Basically, the idea is assume everyone is dumb in your design, instruction so that you make something so easy a five-year-old can do it. I totally agree with not holding users hostage. But this page is ONLY reached in the middle of their intended order process that THEY initiate (this page will never be reached in a browsing sort of way). So I think it's a pretty legitimate use case where you're saving a common user mistake from themselves. A demographic of customers that are not tech-savvy, so they honestly need such guidance.
不幸的是，我会将其归为营销和网页设计 101。规则 #1，人们是愚蠢的。不要被认为是粗鲁或悲观的。基本上，这个想法是假设每个人都在你的设计和指导中很愚蠢，这样你就可以让一个五岁的孩子做的事情变得如此简单。我完全同意不将用户扣为人质。但是这个页面只能在他们启动的预定订单过程中到达（这个页面永远不会以浏览方式到达）。所以我认为这是一个非常合理的用例，您可以在其中避免自己的常见用户错误。不精通技术的客户群体，因此他们确实需要此类指导。
回答by u283863
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.';
}
};
This will alert the user whenever the page unloads (eg leaving the page) until btn_clickedis set to true.
这将在页面卸载（例如离开页面）时提醒用户，直到btn_clicked设置为true。
回答by o.v.
Don't do it.
不要这样做。
There is a fine line in terms of usability - on one hand sometimes I may have intended to place an order but accidentally left the page; on the other hand it could get annoying pretty quickly. When abrowser is set up to save previous session (i.e. reopen tabs on next launch) and one page behaves this way, you'll end up with onlythat tab re-opened next time (confirmed on Mac Safari), discarding the rest of the tabs. They'll not be buying from you again!
在可用性方面有一条细线 - 一方面，有时我可能打算下订单但不小心离开了页面；另一方面，它可能很快就会变得烦人。当浏览器设置为保存前一个会话（即在下次启动时重新打开选项卡）并且一个页面以这种方式运行时，您最终只会在下次重新打开该选项卡（在 Mac Safari 上确认），丢弃其余的选项卡。他们不会再从你这里买东西了！
I'd suggest you make it clear to the user by means of inline messages that the order has not been submitted yet and they still need to confirm their action, but if they were to accidentally navigate away you should make it easy to pick up where they left off. Would be fairly trivial to store such info in a cookie so that on subsequent page visits the user would be prompted with "you have an incomplete order for ..., would you like to finish it now?"
我建议您通过内嵌消息向用户明确说明订单尚未提交，他们仍需要确认他们的操作，但如果他们不小心离开，您应该很容易找到哪里他们离开了。将此类信息存储在 cookie 中是相当简单的，这样在后续页面访问时，用户会收到提示“您有一个不完整的订单......，您想现在完成吗？”
As an alternative, you could use rely on an inactivity alert (think of online banking prompting you when your session is about to expire) to bring the user back to the "complete order" page if they get distracted.
作为替代方案，如果用户分心，您可以使用依赖不活动警报（想想在线银行在您的会话即将到期时提示您）将用户带回“完整订单”页面。
If you are certain you want to rely on this event, the answers to this questionmay provide better insight. Basically, the functionality or its implementation beyond a basic text warning should not be relied onto because of inconsistent (?) implementation across browsers as well as possibility of having it blocked by the user.
如果您确定要依赖此事件，则此问题的答案可能会提供更好的见解。基本上，不应该依赖基本文本警告之外的功能或其实现，因为浏览器之间的实现不一致（？）以及被用户阻止的可能性。
Another update:
另一个更新：
Prompted by Derek's comment on this approach being used by Gmail etc., I've come across an articlesuggesting you stick with onunloadinstead and rely on AJAX calls to save the state of the page - which backs my thoughts on allowing the user to pick up where they left even if the javascript event is never triggered.
在德里克对 Gmail 等使用的这种方法的评论的提示下，我看到一篇文章建议您坚持使用onunloadAJAX 调用来保存页面状态 - 这支持了我允许用户拿起的想法即使从未触发 javascript 事件，他们也会离开的地方。
