[JavaScript] 確認ダイアログでOKが押されたときにリンク先を開きたい
外部サイトへのリンクがクリックされたときなど、ダイアログでユーザーに確認を取ってから動作を行いたい場合があります。
そんなときは、JavaScriptの「confirm」関数を使うと手軽に確認ダイアログを表示させることができます。
サンプルコード
html
<a href="" target="_blank" class="link_confirm">外部サイトへのリンク</a>
aタグに「link_confirm」というクラスを設定しています。
後述するJavaScriptの処理で「link_confirm」クラスが設定されているaタグに対して確認ダイアログが表示されるようにします。
JavaScript
document.addEventListener('DOMContentLoaded', function() {
const linkConfirms = Array.prototype.slice.call(document.querySelectorAll('.link_confirm'));
linkConfirms.forEach(function(linkConfirm) {
linkConfirm.addEventListener('click', function(event) {
const resultConfirm = confirm('外部のサイトに移動します。よろしいですか？');
if(!resultConfirm) {
event.preventDefault();
}
});
});
}, false);
「link_confirm」クラスが設定されている要素を取得し、forEachでループさせます。
ループの中で「addEventListener」関数でクリック時のイベント処理を登録します。
処理の中でcomfirm関数を使って確認ダイアログを表示するようにしています。
確認ダイアログで選択された結果は、confirm関数の戻り値として受け取ることができます。
戻り値がfalseだった（＝「キャンセル」が選ばれた）ときに「event.preventDefault」を実行することで、以降の処理（リンク先へのジャンプ）をスキップさせています。
サンプルコード（jQeury）
jQuery(function($) {
const linkConfirms = $('.link_confirm');
if(linkConfirms.length) {
linkConfirms.click(function(event) {
const resultConfirm = confirm('外部のサイトに移動します。よろしいですか？');
if(!resultConfirm) {
event.preventDefault();
}
})
}
});
jQuery版のサンプルコードです。ループ処理が不要になるので幾分シンプルなコードにすることができます。
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。