離脱防止モーダルを作ってみた

離脱防止のモーダルの作成

離脱防止モーダルを作成したのでその時のメモ。

コード

const onBeforeunloadHandler = (e) => {
  const val = e;
  val.returnValue = '';
};

window.addEventListener('beforeunload', onBeforeunloadHandler);

動き

この数行でユーザーがアクションを起こし、
ページ遷移をしようとすれば離脱防止のアラートが出てくる。

ちなみにdefaultで
「このサイトを離れてもよろしいですか？」とアラートが表示される。
val.returnValue = '';で
アラートに表示する文字を設定できたみたいなのですが
現在はできなくなっているみたいです。(でも、このコード入れないとエラー起こすかも)

予想外の出来事

今回、実装にあたり予想外の出来事が起きた。
ページにアクセスしてアクション(スクロールしたり、クリックしたり)しないで
クローズボタン、戻るボタンを押すと離脱アラートが出てこない。

これは仕様らしいです。。