<景品表示法に基づく表記 > 本サイトのコンテンツには、商品プロモーションが含まれている場合があります。

Web制作

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

スポンサードリンク

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=""の場合にはページがリロードする。
・スマホでは指マークにならない・・・

スポンサードリンク

おすすめ記事一覧

今月のおすすめプラグインセール! 1

今月のおすすめプラグインセール! DTMで使えるVST/AU/AAX対応プラグインのセール情報ページです。※価格は為替レートで変動します。 DTMプラグイン購入サイト プラグインが購入できるサイトはいくつかありますが、その中でもpluginboutiqueを激推しします。 購入したプラグインのアップデート管理、購入後のポイント利用、毎月変わる購入時のおまけプラグインと特典がもりだくさんです。 pl ...

2

DTMで使えるVST/AU/AAX対応プラグインのセール情報ページです。 このページで紹介しているセール情報はほんの一部。 今すぐセール会場を見るにはこちら >> pluginboutique年末セール会場はこちら >> bestservice年末セール会場はこちら >> ※随時更新予定 ※表示価格は為替レートで変動します。 おすすめの年末DTMセール Solid State Logic SSL ...

3

Scaler2とは? Scaler2はコード進行を作るときに必要となる機能を網羅しているプラグインです。 作曲していてこんな悩みはありませんか? 例えば このコード良いな!と感じたときにどんな構成音かわからなくて鍵盤が押さえられない コード進行を考えているときに前後の順番を入れ替えたかったけど、入れ替えるのが面倒 コード進行を聞いてみて良いものを選びたい 同じコード進行だけどキーを変えて聞いてみた ...

4

「Instacomposer」はメロディ、ベース、パッド、コードのパターンを最大5トラック同時にMIDI作成できる作曲補助ツールです。 買っても大丈夫!? Instacomposer について Instacomposer サウンドチェック https://youtu.be/eXa1ix1xJdg https://youtu.be/ecOwMJxam9o Instacomposer で作曲の苦手意識 ...

-Web制作
-, ,