【jQuery】リンク(aタグ)を無効化＆少し待ってからリンク先へ飛ぶ方法

リンクをクリックしても、飛ばないようにする方法と
リンクをクリックした後、少し待ってから遷移する方法のご紹介です。
まずは、クリックしても飛ばないようにする方法です。

リンク（aタグ）を無効化する

HTML

<a class="demo" href="https://hajimete.org/">ブログトップへ飛ぶ</a>

jQuery

$(".demo").on("click", function() {
  event.preventDefault();
});

DEMO

このボタンを押してもリンク先へは飛びません。
ブログトップへ飛ぶ
jQueryでaタグ（.demo）のリンクイベントを無効化しています。
「event.preventDefault()」は、リンクのイベントは無効化できても、クリックイベントはちゃんと取得していますよね。
では次にクリックしたリンクのURLを取得してみよう。

クリックしたリンク（aタグ）からリンク先（href）を取得する

「event.preventDefault()」のクリックイベントのみ取得できる機能を使い、クリックしたaタグのリンク先（href）を取得し表示します。

HTML

<a class="demo1" href="https://hajimete.org/">ブログトップへ飛ぶ</a>

jQuery

$(".demo1").on("click", function() {
  event.preventDefault();
  var link = $(this).attr('href');
  alert('取得したリンク先は「'+link+'」です！');
});

DEMO

このボタンを押してもリンク先へは飛びません。
ボタンのリンク先（href）を取得し表示します。
ブログトップへ飛ぶ
クリックしたボタンのリンク先（href）を取得して、結果がアラートされましたね。
リンク先の取得は「$(this).attr(‘href’)」でしています。
「$(this)」には、クリックした要素「$(“.demo1”)」が入っています。
「attr()」は、HTML要素の取得、設置、変更が可能です。例えば、「$(‘a’).attr(‘class’)」と書けば、「demo1」が取得できたりします。今回は、リンク先の取得なので「attr(‘href’)」と書いています。
リンク先（href）の取得が完了しましたので、クリックしたら少しだけ待ってリンク先に飛ぶように指定してみましょう！

少し待ってから取得したリンク先へ飛ぶ

最後に、少し待ってから取得したリンク先へ飛ぶ方法のご紹介です。

HTML

<a class="demo2" href="https://ja.wikipedia.org/wiki/hyperlink">Wikipediaへ飛ぶ</a>

jQuery

$(".demo2").on("click", function() {
  event.preventDefault();
  var link = $(this).attr('href');
  setTimeout(function() {
    location.href= link;
  }, 2000);
});

DEMO

このボタンを押すと2秒待ってからWikipediaに飛びます。
Wikipediaへ飛ぶ
指定時間分処理を遅らせる「setTimeout()」を使って処理を2秒遅らせて実行し
「location.href」で取得したリンク先へ遷移します。