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

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 岁的 child 可以做到的简单事情。我完全同意不将用户作为人质。但是这个页面只能在他们发起的预定订单过程的中间到达(这个页面永远不会以浏览的方式到达)。因此，我认为这是一个非常合理的用例，您可以在其中避免自己的常见用户错误。不精通技术的客户群体，因此他们确实需要这样的指导。

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/