如何使用JavaScript检测网页重载操作已被取消

由于浏览器没有提供直接的“页面重载取消”事件，我们可以通过间接监听浏览器行为来实现需求：利用beforeunload标记卸载状态，再通过focus事件判断用户是否取消了卸载操作。

实现步骤 #

1. 定义状态变量标记是否处于卸载流程中
2. 在beforeunload事件中执行重载前的行为，并标记卸载状态
3. 监听页面focus事件，若处于卸载状态则判定为用户取消了重载，执行撤销逻辑

代码示例 #

// 标记是否正在执行页面卸载流程
let isUnloading = false;

// 页面卸载前触发的事件
window.addEventListener('beforeunload', (event) => {
  // 这里执行你在页面重载前的自定义行为
  doYourBeforeUnloadAction();

  isUnloading = true;
  // 触发浏览器的卸载确认框（部分浏览器需要设置returnValue或preventDefault）
  event.preventDefault();
  event.returnValue = '';
});

// 页面重新获得焦点时触发
window.addEventListener('focus', () => {
  if (isUnloading) {
    // 用户取消了重载，执行你的撤销逻辑
    cancelYourBeforeUnloadAction();
    // 重置状态
    isUnloading = false;
  }
});

// 示例函数：重载前的行为
function doYourBeforeUnloadAction() {
  console.log('执行重载前的操作');
}

// 示例函数：取消重载后的撤销行为
function cancelYourBeforeUnloadAction() {
  console.log('取消重载，执行撤销操作');
}

补充说明 #

• 这种方案基于浏览器行为逻辑：当用户在卸载确认框中选择“取消”，页面会重新获得焦点；若用户确认卸载，页面则直接跳转，不会触发focus事件。
• 之前尝试的event.clientY方案已不可靠：现代浏览器对beforeunload事件的限制越来越严格，该属性在多数场景下无法准确判断用户操作。
• 主流浏览器（Chrome、Firefox、Edge）均支持此方案，兼容性较好。

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