アプリ開発からお金の節約まで幅広く気になったネタを記録していきます

さくらいらぼ

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; 代用できる。

スポンサードリンク

ソース例

画面遷移しないでいいなら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© さくらいらぼ , 2019 All Rights Reserved.