jQuery一覧

JavaScript・jQueryを用いてaタグを無効化する方法

aタグをonclickのトリガーとして使用する際などに、aタグを無効にしたいことがあると思います。
今回は、aタグをJavaScriptやjQueryを使用し無効にする方法について紹介します。

アンカータグを使用する方法

アンカータグを使用する方法です。アンカータグは通常、ページ内リンクをはる場合などに使います。

ただ、このアンカータグを使用する方法では、aタグをクリック後、ページ上部へスクロールしてしまいます。完全にaタグを無効化することが出来ません。

JavaScriptを使用する方法

JavaScript

HTML

上記のようにhrefにonclickした際に動作するメソッドの戻り値をfalseにする関数を定義すると、aタグを完全に無効化することが出来ます。

他にも上記の様に、javascript:void(0)をhrefに設定する方法もありますが、javascriptが無効なブラウザの場合おかしな挙動をすることがあります。また、マウスオーバーした際に、javascript:void(0)という表示がブラウザの左下に表示されてしまいます。

もうこの方法を使用するのであれば、個人的には、下記の方法を個人的には押します。

jQueryを使用する方法

jQuery

HTML

Jqueryでaタグがクリックされた際にfalseを返す方法です。
この方法だと、マウスオーバー時にブラウザの左下に変なURLも表示されずaタグを無効にすることが出来ます。
上記の例では、id=invalidのaタグを無効化しています。

jQueryの部分を下記の様にするとページの全てのaタグを無効に出来ます。

その他にもclass指定してaタグを無効化したりできるので試してみてください。

また、aタグのonclickを拾って処理をしたい場合など、cssで特定の場所にマウスカーソルが当たった場合に指マークを表示させる方法があります。マウスカーソルが当たった時に指マークのデザインなどをcssを行えば、同じ様なことをcssを使用して行うこともできます。
興味のある方は、下記の記事に記載があるのでご覧ください。

CSSでマウスのカーソルが当たった部分を指マークに表示する方法について紹介しています。