aタグをonclickのトリガーとして使用する際などに、aタグを無効にしたいことがあると思います。
今回は、aタグをJavaScriptやjQueryを使用し無効にする方法について紹介します。
Contents
アンカータグを使用する方法
アンカータグを使用する方法です。アンカータグは通常、ページ内リンクをはる場合などに使います。
ただ、このアンカータグを使用する方法では、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を使用して行うこともできます。
興味のある方は、下記の記事に記載があるのでご覧ください。
