Web制作

古いサイトでたまに見かけるaタグ「javascript:void(0);」の意味【WEB制作】

スポンサードリンク
スポンサードリンク

2019/04/26

Javascript

Javascript


古いサイトの修正をするときに見かけることがあるのが
「javascript:void(0);」

aタグの画面遷移を無効化するために使われていますが、
どんなメリット・デメリットがあるのでしょうか。

「javascript:void(0);」のメリット

・aタグのhrefに書き込むとaタグの画面遷移を無効化
・カーソルが「指カーソル」の形になるのでボタンの画像が視覚的に”押すもの”とわかりやすくなる。
・表示枠をタブ化するときなどにURL欄に”#”などがつかない

「javascript:void(0);」のデメリット

・スマホでは「指カーソル」にならない
・CSSの cursor:pointer; 代用できる。

スポンサードリンク

ソース例

<ul>
    <li><a href="javascript:void(0);"><img src="1.jpg"></a>
    </li><li><a href="javascript:void(0);"><img src="2.jpg"></a>
    </li><li><a href="javascript:void(0);"><img src="3.jpg"></a>
    </li>
</ul> 

画面遷移しないでいいならhref=""

まぐろ
リンク先のURLを空にすればいいじゃん

となりそうなのですが、href=""の場合、ページのリロードが発生するため
タグをクリックするとスクロールバーがページの先頭に戻ります。

JavaScript Void演算子とは

void 演算子は与えられた式 (expression) を評価し、undefined を返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/void

何をしても「undefined」が返ってきます。
undefinedはまだ何も定義していない状態。

href="javascript:void(0);"はundefinedを取得してリンクタグを無効化したいための記述方法です。

void()の引数には何かしらの値を入れなければならず。
わかりやすさから「0」が入れられています。

まとめ

・href="javascript:void(0);"とaタグに書き込むと画面遷移を無効化でき、
カーソルが指マークになる。

・href=""の場合にはページがリロードする。
・スマホでは指マークにならない・・・

スポンサードリンク
スポンサーリンク

-Web制作
-, ,

Copyright© さくらいらぼ , 2020 All Rights Reserved.