关闭（不离开）页面时jquery beforeunload？

Question

关闭（不离开）页面时jquery beforeunload？如何显示“您确定要离开页面吗？” 当用户实际尝试关闭页面时（单击浏览器窗口或选项卡上的X按钮），当他试图离开页面时（单击另一个链接）。当用户尝试关闭页面时，我的客户希望显示一条消息“您确定要离开页面吗？您的购物车中仍有商品。”不幸的是$(window).bind('beforeunload')，只有当用户关闭页面时才会触发。jQuery的：function checkCart() {    $.ajax({     url : 'index.php?route=module/cart/check',     type : 'POST',     dataType : 'json',     success : function (result) {        if (result) {         $(window).bind('beforeunload', function(){           return 'leave?';         });        }     }   })}

Answer 1

您可以使用JQuery来完成此操作。

对于例如，

<a href="your URL" id="navigate"> click here </a>

你的JQuery意志，

$(document).ready(function(){

    $('a').on('mousedown', stopNavigate);

    $('a').on('mouseleave', function () {
           $(window).on('beforeunload', function(){
                  return 'Are you sure you want to leave?';
           });
    });});function stopNavigate(){    
    $(window).off('beforeunload');}

并获得离开消息警报，

$(window).on('beforeunload', function(){
      return 'Are you sure you want to leave?';});$(window).on('unload', function(){

         logout();});

此解决方案适用于所有浏览器，我已对其进行了测试。

Answer 2

基本上，该解决方案添加了一个侦听器来检测链接或窗口是否导致卸载事件被触发。

var link_was_clicked = false;document.addEventListener("click", function(e) {
   if (e.target.nodeName.toLowerCase() === 'a') {
      link_was_clicked = true;
   }}, true);window.onbeforeunload = function(e) {
    if(link_was_clicked) {
        return;
    }
    return confirm('Are you sure?');}