リンクをクリックしたときに起こるページ遷移はリンクのデフォルト機能です。

この機能を止めたい場合、jQueryでは２通りの方法が使えます。

ここではそのリンクを無効化する２つの方法とそれぞれの違いについて解説

jQueryでリンクを無効化する方法

その方法とはズバリ次の２つ

• イベントコールバック内で return false; を使う
• イベントコールバック内で preventDefault を使う

この２つについて順番にやり方を説明していきます。

return false; を使う方法

まず１つめはクリックイベントが起きた時に  return false;  で無効化する方法

この方法を使った場合、イベントが起きた要素の下にもイベントが伝播しなくなります。

例えば次のようなリンク要素があるとしましょう。

このリンクを押すと当然リンク先のページへ飛びます。

このページ遷移機能を無効化する方法の１つがクリックイベント内で  return false;  することです。

例えば次のようなjQueryコードを書けばOK

こうすることでリンクをクリックしたとしてもページ遷移が起こらなくなります。

preventDefaultを使う方法

お次はクリックイベント時に  preventDefault  を呼び出して無効化する方法です。

こちらを使う場合はイベント元でだけ機能が停止して、その下の要素にはイベントが伝わります。

それでこの  preventDefault  の使い方ですが、イベントオブジェクトに対して呼び出します。

例えば次のようにクリックイベントが起きた時に呼び出せばOK

先ほどと説明した  return false;  を使う場合と同じくこれでもリンク機能を無効化可能です。

return false; と preventDefault の違い

ということでリンクを無効化するには今紹介した２つの方法が使用可能です。

ただし、どちらも全く同じ動作をするわけではありません。

両者には次のような動作的な違いがあります。

• return false; を使う場合
  イベントが下のリンク要素にも伝わらない
• preventDefault を使う場合
  イベントは下のリンク要素には伝わる

リンク機能を無効化した下のリンク要素にイベントが伝わるかどうかの違いです。

例えば次のような入れ子になってるリンクを考えてみてください。

こういうのはブログカードとか商品リンクとかで良く見かける構造です。

それで上の例の「Inner Link」をクリックしたとしましょう。

そうすると  return false;  と  preventDefault  ではそれぞれ動作に次の違いが現れます。

• return false; の場合
  「Outer Link」にはクリックイベントが伝わらずページ遷移は起きない
• preventDefault の場合
  「Outer Link」にはクリックイベントが伝わり "xxx" のページに遷移する

これだけの違いです。

外側のリンクにイベントを伝えないためには  return false;  を使った方が良さそうです。

ここまでのまとめ

ということでリンク機能をjQueryで無効化する方法を紹介しました。

もちろん  return false;  や  preventDefault  はリンク以外でもデフォルト機能を停止するのに使えます。

例えばリンク以外の例を挙げるとするなら次のようなことが可能

• チェックボックスでチェックされるの防ぐ
• テキスト欄で文字が入力されるのを防ぐ
• フォーム内でボタンを押したときの送信を防ぐ

フォーム部品で勝手にイベントが起こるのを防ぐのにも使えますね。

ではでは($・・)/~~~