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

javascript
この記事は約3分で読めます。
スポンサーリンク

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

リンク(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」で取得したリンク先へ遷移します。

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました