離脱前に確認する
デモ
ブラウザの戻るボタンや、閉じるボタンを押してみてください。 以下のテキストを押すと、確認の有無を着替えることができます。
[確認をする]
[確認をやめる]
JSコードコピー
使い方
ページ離脱前に必ず確認を出したい場合は、JavaScriptコードをコピーアンドペーストするだけです。
ある操作をきっかけに確認有無を切り替えたい場合は、「ある操作」に対してイベントを設定してください。
本デモでは以下の様に設定されています。
data-jscopyand="enableBeforeunload"が付与された要素がクリックされたら確認する。
data-jscopyand="disableBeforeunload"が付与された要素がクリックされたら確認しない。
解説
最初に確認を有効にするための関数を定義しておきます。
eはbeforeunloadというイベントから渡ってくる引数で、returnValueというプロパティに値を設定することで離脱前に確認することができます。
windowにbeforeunloadというイベントを設定することで、離脱前に任意の処理をすることができます。
初期状態では離脱前に確認するので、処理にはconfirmを指定しておきます。
確認有無の切り替えのトリガーとなる要素は複数あることを想定し、document.querySelectorAllで全て取得しておきます。
確認を有効にするための全トリガー要素を変数enableTriggersに、無効にするための全トリガー要素を変数disableTriggersに格納します。
本デモでは特定要素をクリックすることで確認が有効になると想定し、enableTriggersに反復処理を行い、全てにクリックイベントを設定します。
同様に本デモでは特定要素をクリックすることで確認が無効になると想定し、disableTriggersに反復処理を行い、全てにクリックイベントを設定します。
無効にするにはwindowに設定したbeforeunloadイベントを削除する必要があります。
removeEventListenerというものを使い、第２引数にaddEventListenerの時の第２引数と同じ関数を指定します。
ヘルプ・コンタクト
機能に関するご質問は、このページの下部に表示されている Twitter
のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM
等でご連絡ください。