[ JavaScript ] Aタグのリンクを無効にする ( javascript:void(0); )

Pocket

ここでは、A タグの画面遷移を無効にする方法について記載します。Aタグのリンクがクリックされても画面遷移しないようにするには href に undefined を設定すればいいです。 以下がサンプルコードになります。

スポンサーリンク

A タグの画面遷移を無効にするサンプルスクリプト

<a href="javascript:void(0);">クリックされても画面遷移しない</a>

そもそも、void 演算子はカッコ内の式を評価し、undefined を返すものなので、上記のサンプルで式 (0) を評価していますが、 実際には、1 であっても、全く異なるスクリプトを実行させても問題ありません。ただ、void(0) と記述したほうがなんとなくわかりやすいだけです。0 と言えば false、false と言えば動作しないと言うイメージになってきませんか?

上記と同様にリンクのクリックを無効にするには、onclick 属性を使用して以下のように記述することもできます。

<a href="#" onclick="return false;">クリックされても画面遷移しない</a>

こちらもわかりやすいかと思います。href 属性でページトップ (#) へ遷移させようとしていますが、onclick 属性のリターン値に false を与えることによって、ページトップへ遷移させることなく Aタグの動作を無効にしています。

javascript:void(0); はリンクを無効にするという意味ではない

前述しましたが、javascript:void(0); はAタグのリンクを無効にするという意味ではなく、あくまでも式を評価しリターン値に undefinedを返す演算子です。あくまでも Aタグの href 属性に undefined が設定されていたらリンクが無効になるということを利用しているだけです。

有用な使い方ではないし、例えがあまりよいとも思いませんが、以下のようなスクリプトは正常に動作します。

<a href="javascript:void(window.location='http://www.yahoo.co.jp');">クリックしたら画面遷移する</a>

<a href="javascript:void(window.location='http://www.yahoo.co.jp');" onclick="return false;">クリックしても画面遷移しない</a>

void 恐るべしです。

参考
スポンサーリンク


Pocket

Leave a Comment

Your email address will not be published. Required fields are marked *