はじめに

「このサイトを離れますか？」ってアラートご存知ですか？


入力項目の多いページから遷移や閉じるボタンで離れる際に表示されるアラートになります。

うっかりミスでページを消してしまって「ああぁぁぁーせっかく入力したのにぃぃぃぃ」といった事故を防ぐ役割をします。今回はそんな親切なアラートの実装方法をご紹介していきたいと思います。

JavaScriptを使った制御

イベント登録

window.onbeforeunloadでイベントを登録することが出来ます。

window.onbeforeunload = function(e) {
  e.preventDefault();
  return '';
};

イベント削除

イベント処理をnullで上書きすることにより、イベントを削除することが出来ます。

window.onbeforeunload = null;

jQueryを使った制御

イベント登録

ｊQueryでも同じくbeforeunloadイベントを使いますが、ここではjQueryらしくon()でイベント登録していきます。

$(window).on('beforeunload', function(e) {
  e.preventDefault();
  return '';
});

イベント削除

削除はoff()で行います。on()・off()は簡潔に書けて良いですよね。

$(window).off('beforeunload');

以上がイベントの登録＆削除方法になります。

一点注意が必要なのがイベントの登録をwindow.onbeforeunloadで行い、イベントの削除を$(window).off()で行うといったことは出来ませんのでご注意ください。（逆も同じです）

さいごに

このアラートを実装するまでは「こんなイベントあったんだ」と思っていましたが、いざこのイベントを知ってからは結構いろんなサイトで見かけることに気付きました。どこの会社もユーザビリティを考えてくれてるんですね。ありがとうございます。

自分もいち開発者として、こういうユーザーへの気配りを忘れないようにしないといけないな。うん。