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

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

 

HTML

jQuery

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

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

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

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

 

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

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

まとめ

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

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

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

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

CAPTCHA