移动浏览器后退按钮事件处理

Question

当我单击移动浏览器的后退按钮时，它应该说出确认框，例如

“您要离开此页面吗”

如果用户单击“确定”，则需要触发某些功能。

一切正常。 但是，当我单击“取消”时，它不会停留在同一页面上。 我尝试了以下代码。 但是无法成功。

var unloadEvent = function (e) {
    var confirmationMessage = "Are you want to leave this page";
    (e || window.event).returnValue = confirmationMessage; 
    if(confirm(confirmationMessage)) {
      //some JS function
    } else {
       return false;
    }
};
window.addEventListener("beforeunload", unloadEvent);

请帮我解决这个问题。 谢谢

Answer 1

您无法修改onbeforeunload的默认对话框，因此最好的选择是使用它。

window.onbeforeunload = function() {
    //Do some other stuff here..
    return 'You have unsaved changes!';
}

这是 Microsoft对此的参考 ：

将字符串分配给window.event的returnValue属性时，将出现一个对话框，为用户提供保留在当前页面上并保留分配给它的字符串的选项。 对话框中显示的默认语句“您确定要离开此页面吗？...按OK继续，或按Cancel保留在当前页面上。”无法删除或更改。

问题似乎是：

1. 调用onbeforeunload ，它将把处理程序的返回值作为window.event.returnValue 。
2. 然后，它将返回值解析为字符串（除非它为null）。
3. 由于将false解析为字符串，因此对话框将触发，然后传递适当的true / false 。

结果是，似乎没有一种将false分配给onbeforeunload的方法，以防止它与默认对话。

jQuery的其他说明：

• 在jQuery中设置事件可能会出现问题，因为这也会导致其他onbeforeunload事件发生。 如果您只希望发生卸载事件，那么我会坚持使用普通的JavaScript。

• jQuery没有onbeforeunload的快捷方式，因此您必须使用通用bind语法。

   $(window).bind('beforeunload', function() {} ); 

欧文（Owen）针对以下问题提出了这个答案：重写onbeforeunload谢谢欧文。