jQueryでaタグのリンクを無効化する方法を解説！
jQueryでaタグのリンクを無効化させる方法をサンプルコード付きで解説していきます。pointer-eventsプロパティを使った方法やクリックイベントの処理、void(0)を使った方法などいくつかやり方を紹介します。
jQueryでaタグのリンクを無効化したい
WEB開発の中でaタグを設置しているが、そのリンクの挙動を無効にしたいという場合があります。
例えば特定の条件を満たさないと押せないリンクや、JavaScriptの処理によって遷移先を切り替えたい場合などなど。
そのような場合にリンクを無効化する方法はいくつかありますが、jQueryでaタグのリンクを無効化する方法を今回サンプルコード付きで解説します。
jQueryでaタグのリンクを無効化する方法
それでは早速ご紹介します。下記のサンプルコードを見てみましょう。
上記のサンプルコードではaタグのリンクを無効化する方法を4種類の方法で実現しています。プレビューの「リンク」でどのリンクをクリックしても遷移しないはずです。
この4つの方法をそれぞれ紹介していきます。
CSSのpointer-events:noneを設定
最初のaタグのリンクを無効化する方法はjQueryでCSSのpointer-eventsプロパティをnoneに設定する方法です。
pointer-events:none
// CSSのpointer-events: noneを設定
$('.link-1').css('pointer-events', 'none').attr('tabindex', -1);pointer-eventsはマウスポインターでのイベントの発生を制御するプロパティでnoneとすることでイベントを発生しないように出来ます。
ただし制御できるのはマウス操作のみで、tabなどでリンクをアクティブにしてEnterキーで遷移できてしまうため、今回pointer-eventsプロパティの設定に加えてtabindexを-1にして、tabで選択できないようにしています。
クリックイベントでリンクを無効化
次の方法はリンクのクリックイベントを拾い、falseを返することでリンクを無効化しています。
クリックイベントでリンクを無効化
// クリックの処理でreturn false
$('.link-2').on('click', function() {
return false;
});void(0)を設定する
aタグのhref属性にjavascript: スキームでvoid(0)を設定することでリンクを無効化させる事が出来ます。
hrefにvoid(0)を設定
// 遷移先をvoid(0)にする
$('.link-3').attr('href', 'javascript: void(0)');jQueryのattr()を使い、href属性にjavascript: void(0)を設定しています。
void(0)が何なのか、その意味を知りたい方は下記を参考にしましょう。
リンクをやめる
最後のリンクの無効化方法はjQueryのcontentsメソッドとunwrapメソッドをつないで、リンクの全子要素を取得し、aタグでの囲いを外しています。
リンクを無効化する
// リンクをやめる
$('.link-4').contents().unwrap();まとめ
いかがでしたでしょうか。今回紹介したいずれのやり方でもリンクを無効化させる事が出来ますが、それぞれ完璧に無効化させるものではなく、例えばjQueryが対応していないブラウザでは効かなかったりするなどあります。
100%対応したい場合は、aタグではなく別のタグを使うことをおすすめしますが、大体のブラウザで対応できていればいいレベルであれば、今回紹介した方法で対応できるかと思います。
ぜひ参考にしてみて下さい。
