如何防止通过浏览器按钮而不是通过链接导航？

Question

如果用户通过关闭浏览器或使用浏览器的历史记录按钮离开页面，我想警告用户使用以下 JavaScript：

window.onbeforeunload = function(e) {
    return 'Ask user a page leaving question here'; 
};

但是无论如何，我网站上的链接和按钮都应该有效。我怎样才能做到这一点？

Answer 1

想到的第一种方法是设置一个变量，告诉您是否单击了链接：

var linked = false;

window.onbeforeunload = function(e) {
    if (!linked)
        return 'Ask user a page leaving question here'; 
};

document.addEventListener('click', function(e) {
    if (e.target.tagName === "A")
        linked = true;
}, false);

也就是说，在文档级别设置一个点击事件处理程序，测试被点击的元素是否是一个锚点（或者任何你想要允许的），如果是的话设置变量。 （显然，这假设您在较低级别没有其他锚元素单击处理程序来停止事件传播。）

Answer 2

var linkClicked = false;
window.onbeforeunload = function(e) {
    if (!linkClicked){
        linkClicked = false;
        return 'Ask user a page leaving question here'; 
    }
};

$(document).ready(function(){
    $('a').click(function(e){
        linkClicked = true;
    });
});

显然这依赖于 JQuery 将事件处理程序添加到所有链接，但您可以使用任何其他方法附加处理程序，包括如果确实需要，将

onclick="linkClicked=true;"

添加到页面上的每个链接。

编辑：

只是想指出，如果用户单击一个不重定向他们的链接（例如，标签链接到页面上的其他地方，或者返回 false / 阻止执行默认操作的东西）那么这将设置 linkClicked 到true，随后任何基于浏览器的导航都不会被捕获。

如果你想抓住这个，我建议在链接上设置超时，如下所示：

$(document).ready(function(){
    $('a').click(function(e){
        linkClicked = true;
        setTimeout(function(){
            linkClicked = false;
        }, 500);
    });
});

这将允许在重置标志之前触发窗口卸载事件半秒，以便正确捕获未来的导航事件。这仍然不完美，但可能不需要如此。

Answer 3

您可以使用

window.onbeforeunload

活动。

var check= false;

window.onbeforeunload = function () {
   if (!check) {
   return "Are you sure you want to leave this page?"
   }
}

function CheckBackButton() {
    check= true;
} 



referenceElement.addEventListener('onClick', CheckBackButton(), false);

Answer 4

我们确认提示没有？ 像这样？ 拦截页面退出事件

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

Answer 5

如何显示“您确定要离开此页面吗？”何时提交更改？ 这可能会解决您的问题如何