如何区分浏览器关闭与页面导航事件？基于onBeforeUnload的需求

Great question! Distinguishing between browser closure/tab refresh and intentional navigation (like clicking a link) is tricky because both fire the onbeforeunload and onunload events by default. But with a simple flag-based approach, you can reliably tell the two scenarios apart. Here's how to implement your desired logic:

Step 1: Set up a navigation flag #

First, declare a global variable to track whether the user is intentionally navigating away from the page:

// Initialize flag: assume no intentional navigation by default
let isIntentionalNavigation = false;

Step 2: Track intentional navigation triggers #

Add event listeners to capture actions that count as intentional navigation (link clicks, form submissions). This way, we can flip the flag before the onbeforeunload event fires.

Capture link clicks #

Listen for clicks on all <a> tags. We use event delegation here to cover dynamically added links too:

document.addEventListener('click', function(e) {
  const target = e.target.closest('a');
  if (target) {
    // Exclude same-page navigation (anchor links or identical URLs)
    const isSamePage = target.href && target.href === window.location.href;
    const isAnchorLink = target.hash && target.hash !== '';
    if (!isSamePage && !isAnchorLink) {
      isIntentionalNavigation = true;
    }
  }
});

Capture form submissions #

If your page has forms, mark submissions as intentional navigation to avoid misclassifying them as browser closure:

document.addEventListener('submit', function() {
  isIntentionalNavigation = true;
});

Step 3: Update your onbeforeunload logic #

Now use the flag to branch your logic in the onbeforeunload handler:

window.onbeforeunload = function() {
  if (isIntentionalNavigation) {
    // User is navigating to another page via link/form submission
    doSomethingElse();
    // Reset the flag in case the user navigates back later
    isIntentionalNavigation = false;
  } else {
    // User is closing the browser/tab or refreshing the page
    doSomething();
  }
};

Key Notes & Edge Cases #

• Right-click open in new tab: This doesn't trigger an unload on the original page, so no special handling is needed—your flag stays false, which is correct.
• Browser refresh: This will fall into the "browser closure" branch (since no link/form was clicked). If you need to distinguish refresh from closure, you'd need to add extra logic with sessionStorage to track page load timings, but this is rarely necessary for most use cases.
• Dynamic content: Event delegation ensures even links added after page load are tracked, so you don't have to reattach listeners manually.

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