Webアプリを作っていると、ブラウザを閉じたりタブが閉じられたり、戻るボタンが押されたときなどに確認を表示したいことがよくある。ただし、ページ内の要素（リンクなど）がクリックされたときには確認は表示したくない場合もある。

ここではjQueryを使って実現するスニペットを紹介する。

ソース

$(function() {
  var elementClicked = false; // 適当なフラグ
  $(window).on("beforeunload", function() {
    if (!elementClicked) {
      return "本当に遷移しちゃう？";
    }
  });
  $(document).on("click", "a, button, input[type=submit]", function() {
    elementClicked = true;
    setTimeout(function() { elementClicked = false; }, 100);
  });
});

説明

基本的にはwindowのbeforeunloadイベントを利用する。このイベントハンドラでメッセージ文字列を返せば、確認ダイアログが表示される。ただし、このメッセージはFirefoxでは表示されない。

ただしこれだけだとページ内のaやbuttonなどの要素をクリックしてページ遷移する場合にも確認ダイアログが表示されてしまう。これを防ぐには上記のようになんらかのフラグを用意し、aやbuttonのclickイベントで一旦フラグを立て、この間にbeforeunloadが発生した場合は無視するようにしておく。フラグは一定時間（ここでは100ms）経過後にfalseに戻すようにする。

できないこと

上記のように「ページ内リンク」と「ブラウザによる遷移」は判別できるが、後者がどのような遷移なのかを知るすべがない。つまり

• ブラウザやタブの閉じる（×）ボタン
• ブラウザの戻る・進む・更新ボタン
• ショートカットによるウィンドウやタブのクローズ

は判別できない。これはこういうものだと割り切ってWebアプリを設計するしかなさそうだ。