What is the difference between a mouse event occurring and not occurring after the page is loaded?

Question

I tried to detect a tap close event and get a confirmation message. The code is like this. Strangely, if I close the tab after the mouse event occurs(clicking anywhere), the confirmation message appears normally, but if the mouse event does not occur, the message window does not appear and just appears. What is the difference between a mouse event occurring and not occurring after the page is loaded?

$(function(){
    var validNavigation = false;
    //Attach the event keypress to exclude the F5 refresh (includes normal refresh)
    $(document).bind('keypress', function (e) {
        if (e.keyCode == 116) {
            validNavigation = true;
        }
    });

    // Attach the event click for all links in the page
    $("a").bind("click", function () {
        validNavigation = true;
    });

    // Attach the event submit for all forms in the page
    $("form").bind("submit", function () {
        validNavigation = true;
    });

    // Attach the event click for all inputs in the page
    $("input[type=submit]").bind("click", function () {
        validNavigation = true;
    });

    window.onbeforeunload = function () {
        if (!validNavigation) {
            return "Do you really want to close?"; 
        }
        validNavigation = false;
    };

});