这个问题确实挺棘手的——浏览器的取消加载按钮并没有提供直接的DOM事件让我们监听，但我们可以通过几个间接的方式来处理这个场景，避免加载动画一直显示：

方案一：利用页面导航状态间接判断（适合传统表单提交） #

当用户点击提交按钮触发页面跳转后，如果点击浏览器的取消加载，浏览器会中止导航并回到当前页面。我们可以通过监听页面的pageshow事件结合状态标记来识别这个场景：

let isNavigating = false;

// 提交按钮触发时显示加载动画并标记导航状态
$("#submitButton").submit(function(e) {
  $("#loadingBox").css('display', 'block');
  isNavigating = true;
});

// 监听页面卸载前事件，确认导航状态
window.addEventListener('beforeunload', function() {
  isNavigating = true;
});

// 页面重新显示时（包括导航被取消回到当前页）隐藏加载动画
window.addEventListener('pageshow', function(event) {
  if (event.persisted || isNavigating) {
    $("#loadingBox").css('display', 'none');
    isNavigating = false;
  }
});

// 保留你原来的Esc键处理逻辑
$(document).keydown(function (e) {
  if(e.keyCode == 27) {
    $("#loadingBox").css('display', 'none');
  }
});

event.persisted用于判断页面是否是从浏览器缓存中恢复的（比如用户点击后退/取消导航时的情况），结合我们手动设置的isNavigating标记，就能覆盖用户取消加载的场景。

方案二：改用AJAX提交表单（更可控的方案） #

如果可以修改表单的提交方式，改用AJAX提交会让我们对请求状态有完全的控制权，包括监听请求被中止的事件：

$("#submitButton").submit(function(e) {
  // 阻止默认的页面重载提交
  e.preventDefault();
  
  $("#loadingBox").css('display', 'block');
  
  // 发起AJAX请求
  const request = $.ajax({
    url: this.action,
    method: this.method,
    data: $(this).serialize()
  });

  // 请求完成（成功/失败）后隐藏动画
  request.always(function() {
    $("#loadingBox").css('display', 'none');
  });

  // 监听请求被中止的事件（包括用户点击浏览器取消按钮、Esc键等）
  request.abort(function() {
    $("#loadingBox").css('display', 'none');
  });
});

这种方式不仅能完美解决取消加载的问题，还能避免页面重载，提升用户体验——用户不需要等待整个页面刷新，只需要等待请求完成后更新页面内容即可。

为什么直接监听取消按钮不可行？ #

浏览器的取消加载按钮属于浏览器的原生UI组件，并没有暴露对应的JavaScript事件或状态属性给网页开发者，所以我们只能通过页面导航、请求状态这类间接的信号来判断用户是否取消了加载。

内容的提问来源于stack exchange，提问作者sprmap