Sassyブログ

好きなことで暮らしを豊かにするブログ

href属性に設定される「javascript:void(0)」とは?

今回はフロントの小話です。

私自身サーバーサイドのエンジニアのため、 あまり意識してこなかったのですが、
たまにHTMLで以下のような記述を見かけます。

<a href="javascript:void(0);" id="btn" class="btn" onclick="sample();">~</a>

href属性に設定されている「javascript:void(0);」という記述

まだエンジニア歴の浅い方は気になったりしますよね。
(まぁ知ってる人は知ってるかと思いますが。。。)

これは、画面遷移を無効化しているのです。

通常、aタグはクリックされるとhref属性に設定されているURLを開こうとします。

じゃあURL設定なしければいいじゃんという話かもしれないですが、
href属性に空文字を指定してもページは再読み込みをするので作り的にイマイチになってしまいますね。

そのため画面読み込みをさせずに、
sample()を呼び出すことができるのです。

細かいことは割愛しますが、
画面遷移が起きない仕組みをざっくりいうと、
href属性に「undefind」値を設定すると画面遷移が起きない仕組みになっているそうです。

その「undefind」値を設定するために慣習として設定されるのが「javascript:void(0);」です。

以上