CODEWITHSUNDEEP
javascriptdom-eventsonbeforeunload
Ben
Ben

Reputation: 16649

Distinguish between different types of beforeunload events

In JavaScript, is it possible to distinguish between beforeunload events that were triggered by the user closing a browser tab vs clicking a mailto link?

Basically, I would like to do this:

window.addEventListener("beforeunload", function (e) {

    if(browserTabClosed) {
        // Do one thing
    }
    else if (mailtoLinkClicked) {
        // Do a different thing
    }
}

Upvotes: 1

Views: 541

Answers (2)

Ben
Ben

Reputation: 16649

Found a solution by looking at the event (e below) that gets passed in:

window.addEventListener("beforeunload", function (e) {

    // We can use `e.target.activeElement.nodeName`
    // to check what triggered the passed-in event.
    // - If triggered by closing a browser tab: The value is "BODY"
    // - If triggered by clicking a link: The value is "A"
    const isLinkClicked = (e.target.activeElement.nodeName === "A");

    // If triggered by clicking a link
    if (isLinkClicked) {
        // Do one thing
    }
    // If triggered by closing the browser tab
    else {
        // Do a different thing
    }
}

Upvotes: 2

DDomen
DDomen

Reputation: 1878

The beforeunload method has an unstable behaviour between browsers, the reason is that browser implementations try to avoid popups and other malicious code runned inside this handler.

There is actually no general (cross-browser) way to detect what triggered the beforeunload event.

Said that, in your case you could just detect a click on the window to discriminate between the two required behaviours:

window.__exit_with_link = false;
window.addEventListener('click', function (e) {
    // user clicked a link
    var isLink = e.target.tagName.toLowerCase() === 'a';

    // check if the link has this page as target:
    // if is targeting a popup/iframe/blank page
    // the beforeunload on this page
    // would not be triggered anyway
    var isSelf = !a.target.target || a.target.target.toLowerCase() === '_self';
    
    if (isLink && isSelf) {
        window.__exit_with_link = true;

        // ensure reset after a little time
        setTimeout(function(){ window.__exit_with_link = false; }, 50);
    }
    else { window.__exit_with_link = false; }
});

window.addEventListener('beforeunload', function (e) {
    if (window.__exit_with_link) {
        // the user exited the page by clicking a link
    }
    else {
        // the user exited the page for any other reason
    }
}

Obviously it is not the proper way, but still working.

At the same way, you could add other handlers to check other reasons the user left the page (eg. keyboard CTRL-R for refresh, etc.)

Upvotes: 0

Related Questions