JavaScript confirm dialog box keeps on regenerating on cancel event

Question

SCENARIO : I just want to warn user on window change; so I've used jQuery's window blur & JavaScript's confirm dialogue box. When user will click OK button the application will redirect to another page & when user will click CANCEL button nothing will happen. He can continue his work on the same page.

ISSUE : OK button is working perfectly but when I click on the CANCEL button, the browser keeps on regenerating the dialogue box. How do I stop that?

CODE :

$(window).blur( function (e) {

        var closeWindow = window.confirm("Your test will be cancelled if you switch the tabs.");

        if (closeWindow) {

            // redirect to another page

        }
        else {

            // do nothing.
        }
});

Answer 1

As @ROAL explained, the first blur event is because of actual blur, and rest are because of the browser trying to move away from the tab. A simple solution for this would be to use a flag to distinguish between the user generated event and the browser generated event. Give this a try:

var manualCancellation = false;
$(window).blur( function (e) {
    if(!manualCancellation ){

      var closeWindow = window.confirm("Your test will be cancelled if you switch the tabs.");
      console.log(e);
      if (closeWindow) {

          // redirect to another page

      }
      else {
          manualCancellation = true;
          // do nothing.
      }
    } else {
        // Reset the value of manualCancellation so that the event is fired the next time.
      manualCancellation = false;

    }
});