下記のようにウェブページのリンク先がときどきjavascript:;
になっていてリンク先のファイルやページに飛べないことがあります。
このjavascript:;
はそもそもどのような処理をして、サイト制作者はなんのためにこのようなリンクを作成するのでしょうか?
<a href="javascript:;" rel="nofollow">example.pdf</a>
javascript:
で始まるURLに移動しようとすると、後続のJavascriptコードが実行されます。が、今回の場合Javascriptコードは空っぽなので、何もしません。
リンクをクリックしたときにJavascriptを実行するようにしたい場合、最近ではJavascript側からイベントハンドラを登録することが多いですが、この場合href属性はなくても動きますよね。しかし、aタグは元々リンク専用のタグでないこともあり、ハイパーリンクの記法としてはhref属性が必要です。実際、href属性がないとリンクらしい見た目にはなりません。
document.getElementById('link').addEventListener('click', function(){ alert('clicked!') });
<a id="link">Click me!</a>
かといって適当な値を指定してはリンクとして機能してしまいます。<a href="">
と空文字列を指定しても、(クエリ文字列もURLフラグメントも指定されていない)同じページへのリンクになってしまいます。
そこで何もしないリンク先として、何もしないJavascriptを指定するのです。他にも例えば:
<a href="javascript:return false;">
<a href="javascript:void(0)">
なお、イベントハンドラで event.preventDefault()
を呼び出すことで、「hrefに指定されたURLに遷移する」というデフォルトの挙動を抑制することができます。この場合はhrefに何を指定しても構いません。
void
**演算子**は式の戻り値を破棄します。void 0
はvoid(0)
と同じです。
HTML観点では他の方も説明されているようにa
タグを記述するだけでなくhref
属性を付与しなければHTML上はハイパーリンクとして表示されません。(下線が引かれ、文字が青くなるかどうか。)
そのためhref
属性に何等かの値を含める必要がありますが、
<a href="">link</a>
と空文字にしてしまうと自分自身のページへジャンプしてしまうため(スクロール位置も先頭に戻ります)、URLとしては無効な文字列を記述する必要がありました。というのもJavaScript登場当時はJavaScript未対応のブラウザーも存在したからです。そこで編み出されたのが質問の
<a href="javascript:;">link</a>
です。javascript:;
をURLと解釈した場合にJavaScriptを解釈できない既存のブラウザーもjavascript:
という未知のプロトコルということになりリンク先にジャンプできないわけです。
その上で、JavaScriptを解釈できるブラウザーにとってはJavaScript言語の
;
というソースコードになり何も実行しないという意味になります。
実はJavaScript観点では
javascript:;
というソースコードと解釈されることもあります。しかしこれも問題はなく、
javascript:
というgoto文のジャンプ先ラベル;
という空ステートメントとなり構文エラーとはなりません。蛇足ですが
http://example.com
というURLもJavaScript言語上は
http:
というgoto文のジャンプ先ラベル//example.com
というコメント文となり構文エラーとはなりません。
javascript:;
自体は特になにもしません。
恐らく、本来の動作はJavaScriptで行うが、href属性に何か入れないとリンクとして表示されないので、副作用のないjavascript:;
をhref属性に入れてリンクとして用いていると思われます。
href
の属性をこのために使うのはあまり見たことがないと思います。href
の属性より、onclick
などの属性を使う方がましでしょうという意見もあると思います。しかし、現在はJavaScriptのフレームワークなどに任せる方がましだと私は思います。