如何实现仅在用户关闭浏览器或标签页时触发onbeforeunload确认提示？

Got it, let's tackle this problem. The issue with your current script is that the onbeforeunload event fires for every action that unloads the page—closing tabs, refreshing, clicking links, submitting forms, you name it. To narrow this down to just tab/browser closes, we need to detect when the user is intentionally navigating away via links or forms, and disable the prompt for those cases.

Here's the optimized script with breakdowns:

let shouldPrompt = true;

// Disable prompt when user clicks any external/internal link
document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('a');
  if (targetLink && targetLink.href) {
    shouldPrompt = false;
    // Keep prompt enabled for anchor links (they don't leave the page)
    if (targetLink.getAttribute('href').startsWith('#')) {
      shouldPrompt = true;
    }
  }
});

// Disable prompt when user submits a form
document.addEventListener('submit', function() {
  shouldPrompt = false;
});

// Handle the beforeunload event
window.addEventListener('beforeunload', function(e) {
  if (shouldPrompt) {
    // Note: Modern browsers replace custom messages with a default system prompt
    const confirmationMessage = "Are you sure you want to leave?";
    e.returnValue = confirmationMessage;
    return confirmationMessage;
  }
  // Reset prompt state for future actions
  shouldPrompt = true;
});

Key Changes & Explanations: #

• Link Click Detection: We listen for clicks on all <a> tags. When a valid link (not an anchor like #section) is clicked, we disable the prompt before the page unloads.
• Form Submission Handling: Form submissions also trigger page unloads, so we disable the prompt here too.
• Anchor Link Exception: Anchor links don't navigate away from the page, so we keep the prompt enabled for these.
• Modern Browser Compatibility: Most modern browsers (Chrome, Firefox, Edge) now replace custom beforeunload messages with a default system prompt for security reasons. Our logic still controls when the prompt appears, even if the message is standardized.

Quick Note on Page Refresh: #

There’s no 100% reliable cross-browser way to distinguish between a page refresh and a tab/browser close using JavaScript—both trigger the same beforeunload event. If you need to exclude refreshes too, you’d have to use workarounds like tracking session storage or page load timestamps, but these aren’t foolproof. For most use cases, the script above solves the core problem of excluding links and form submissions.

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