【JavaScript】ページ離脱時にアラートを出す方法

こんなことをしたい時

以下のようなアラートの実装方法です。

エントリーフォームなどで情報入力中にページ離脱をしないように、実装したいですよね

結論 こんなコード

const onBeforeUnloadEvent = (event) => {
  event.preventDefault();
  event.returnValue = "";
};

window.addEventListener("beforeunload", beforeUnloadListener);

上記で実装できます。
onBeforeUnloadEvent関数を、beforeunloadイベントが発生したら動かすという処理です。
beforeunloadイベントは、該当ページから離れる前に発生します。
event.preventDefaultを行うと、ページ離脱を止めることができます。

特定の処理でのみページ離脱アラートを出したくない場合

例えば、フォームを送信するボタンをクリックし、フォーム入力確認画面などに遷移する時だけは、ページ離脱アラートを出したくない場合があるかと思います。

そんな時は、該当のボタンをクリックした際の、beforeunloadイベントで、beforeUnloadListener関数をremoveするという処理を入れればOKです。

const onBeforeUnloadEvent = (event) => {
  event.preventDefault();
  event.returnValue = "";
};

window.addEventListener("beforeunload", beforeUnloadListener);

const formBtn = document.querySelector(".js-form-btn");
formBtn.addEventListener("click", () => {
  window.removeEventListener("beforeunload", beforeUnloadListener);
});

Safariではうまく動かない。。

Safariだと、一度だけアラートが出て、リロードしない限りアラートが出ないようになってしまいます。。
iOSだと、そもそも動きません。。
他の方法を調べたのですが、見つからず。。
知っている方いましたら、教えていただけますと幸いです！

最後に

IEがなくなった今、Safariが少し嫌いになってきている。。