jQueryでリンクのクリックを無効にする方法

a タグで作成したリンクをクリックした場合にもリンク先に遷移したく無い場合があるかと思います。

例えば、リンクをクリックしたが何らかのエラーがあった場合は遷移しないなど。

そういう場合リンクを無効にし、遷移を行わない方法があります。

「jQueryで～」と書きましたが、無効にするコード自体はJavaScriptのコードです。

リンクのクリックを無効にするコード

<script type="text/javascript">
$(function(){
  $('a').click(function() {
    var err = false; // エラーチェックをし問題なければ true、エラーの場合は false とします。
    if (err) {
      // 正常の場合の処理
    } else {
      // エラーの場合の処理
      return false;
    }
  });
});
</script>

上のコードは a タグのリンクをクリックし、エラーチェックの結果で処理を分岐する内容です。

※ err には false を直接代入していますが、チェックの結果エラーの場合は false が入ると読んでください。

 

このコード内でリンクを無効にする部分は 9 行目の return false; の部分です。

もっと広い視点で見ると a タグをクリック後、上記のコードを実行し、その後に a タグをクリックした場合の処理(ここではリンク先に遷移)を行うことになります。

つまり、上記のコードを実行した後に自動的にリンク先に遷移してしまうため、それを無効にするために上記のコード内で return false; と定義し処理を終了させるということです。

エラーチェックで正常だった場合は、正常の場合の処理を実行後にリンク先に遷移することになります。

 

ちなみに a タグの href プロパティに空文字を設定 (href=””) すると、今現在開いているページへ遷移します。

href プロパティを設定しないとリンクにもなりません。

aタグを使わずにマウスを指マークにする方法

そもそも正常な場合でもエラーの場合でもリンク先に遷移したく無いときは a タグを使う必要がありません。

その場合のサンプルを用意しました。

 

HTML

<h2 id="h2tag">クリックでしたの文章が開閉しする</h2>
<div id="h2click">
  <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
  <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
  <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
  <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
  <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>

jQuery

$(function(){
  $('h2#h2tag').click(function() {
    $('#h2click').slideToggle();
  });
});

上の例だと #h2tag のH2タグをクリックすると、その下の #h2click のブロック要素が開閉するサンプルになります。

この場合はそもそも a タグをクリックするわけでは無いのでリンク先に遷移することはありません。

でも、マウスカーソルを合わせるとマウスが指マークにならないんです。

なのでクリック出来る部分であることも分かり辛くクリックされにくくなってしまいます。

 

そこで下のようなCSSを用意しました。

h2#h2tag {
  cursor: pointer;
}

このようにCSSに定義するとただのH2タグがリンクのようにマウスカーソルをあてたときに指マークになります。

まとめ

a タグのリンクをクリックして画面遷移したくない場合は return false; を設定することによりリンクを無効に出来る。

無効のリンクを作成する場合は a タグを使わなくてもCSSでリンクのような見た目にし、クリック時の処理を加えることが出来る。