jQueryでリンクの機能を完全無効化する2つの方法

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

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

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

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

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

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

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

return false; を使う方法

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

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

 

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

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

 

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

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

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

preventDefaultを使う方法

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

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

 

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

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

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

return false; と preventDefault の違い

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

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

 

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

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

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

 

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

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

 

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

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

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

これだけの違いです。

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

ここまでのまとめ

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

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

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

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

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください