小粋空間  -  a cheap joke and a play on words site

javascript:void(0)のまとめ

a要素にonclick属性を使いたいけれどもページ遷移したくないときに利用する（というか昔利用していた）「javascript:void(0)」について、今更ですが調べてみました。

認識誤りがあればどこかでつぶやいてください。

１．「javascript:」とは

本題の前に、まず「javascript:」について調べてみました。

「javascript:」はURIスキームのひとつで、「javascript:擬似プロトコル」と呼ばれているようです。

「javascript:擬似プロトコル（javascript: pseudo protocol）」という単語は、最初に日本語のページで使われているのをみつけましたが、調べてみたところ、W3Cのページでも使われているのを見つけました（下）。

Graceful degradation versus progressive enhancement

プロトコルといえば「http:」や「file:」などが思い浮かぶと思いますが、それらと同じ位置づけのようです。

ただしデファクトスタンダードなものであり、有効なURIスキームではありません。

「有効なURIスキームではない」というのは、IANA（インターネットに関連する番号を管理する組織）が「javascript:」をURIとして管理していない、という意味です。

参考：Uniform Resource Identifier (URI) Schemes

javascript:は、冒頭に記したa要素のhref属性の他に、ブックマークレットでも使われます。

２．「void(0)」とは

「void()」は「void演算子」と呼ばれ、与えられた式（expression）を評価し、undefinedを返却するための演算子です。

void( expression )

ためしに次のスクリプトを実行してみます。

<script>
console.log(void(console.log("OK")));
</script>

実行結果は次のようになります。

MDNの「void()演算子」の解説によると、「void(0)」とは「0を無効にする」処理に相当するようです。

３．「javascript:void(0)」とは

本題です。

１項および２項より、「javascript:void(0)」は、javascript:擬似プロトコルを利用して「void(0)」を実行しているという意味になります。

たとえば、次のHTMLで「test」というリンクをクリックしても何も起こりません。

<a href="javascript:void(0);">test</a>

また、void(expression)はundefinedを返却するため、expressionを評価してもページの遷移などは行われません。

次のHTMLで「test」というリンクをクリックすると背景色が切り替わります。

<a href="javascript:void(document.body.style.backgroundColor='#ddd');">test</a>

href属性などでのjavascript:擬似プロトコルの動作については、HTML5仕様の5.6.1 14にも記載されています。

5.6.1 Navigating across documents 14

４．その他

本題からそれますが、冒頭で「a要素にonclick属性を使いたいけれどもページ遷移したくない」と書きました。

が、そもそもページ遷移を行いたくない場合は、onclick属性を使う場合、最後にfalseを返却すればOKです。

<script>
function foo() {
    // ...
}
</script>
<a href="http://user-domain/" onclick="foo();return false">test</a>

jQueryの場合はpreventDefault()でclickイベントをキャンセルするか、イベントハンドラからfalseを返却します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
    $('#test').click(function(e){
        e.preventDefault();
        // return false;
    });
});
</script>
<a href="http://user-domain/" id="test">test</a>

５．参考サイト

参考サイトは下記です。ありがとうございました。

• JavaScript擬似プロトコルについて
• Re:href="#" onclick の悪習
• void 演算子