js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）

实现用户离开页面前提示是否离开此页面的方法通常使用beforeunload事件。该事件会在用户关闭或离开页面前触发。在这个事件中，你可以弹出一个提示框，询问用户是否确认离开页面。下面是具体的实现步骤：

1. 监听beforeunload事件

首先，在 JavaScript 代码中添加如下代码来监听beforeunload事件：

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = '';
});

这里我们使用addEventListener方法来注册一个beforeunload事件监听器。event.preventDefault()方法会阻止默认的离开行为发生，而event.returnValue则会弹出提示对话框。

2. 确认用户操作

当用户点击页面关闭按钮或者跳转到其他页面时，beforeunload事件就会被触发。此时我们需要弹出一个提示框，确认用户是否确定离开当前页面：

window.addEventListener('beforeunload', function(event) {
  const confirmationMessage = '确定离开当前页面吗？';
  event.preventDefault();
  event.returnValue = confirmationMessage;
  return confirmationMessage;
});

其中，confirmationMessage是提示信息，可以根据实际需求自定义。当用户点击“确定”按钮时，浏览器会执行默认的离开行为；当用户点击“取消”按钮时，浏览器便会留在当前页面。

示例一

// 使用纯文本提示信息
window.addEventListener('beforeunload', function(event) {
  const confirmationMessage = '确定离开当前页面吗？';
  event.preventDefault();
  event.returnValue = confirmationMessage;
  return confirmationMessage;
});

示例二

// 使用自定义的提示框
window.addEventListener('beforeunload', function(event) {
  const confirmationMessage = '确定离开当前页面吗？';
  event.preventDefault();
  event.returnValue = confirmationMessage;
  setTimeout(function() {
    if (confirm(confirmationMessage)) {
      event.returnValue = null;
    }
  }, 0);
});

这个示例使用了一个自定义的提示框，当用户点击“确定”按钮时，才会执行默认的离开行为。注意，这里使用了setTimeout函数将确认框的代码从当前堆栈推迟到下一个事件循环中执行，以确保提示框能够正确显示。