あまり見かけないですがaタグのhref属性値にvoidが使われることがあります.
本記事ではJavaScriptのvoid演算子について解説します。
void演算子
void演算子は次のようにどの値を用いてもundefinedを返します。
console.log(void(0)) //undefined console.log(void(1000)) //undefined console.log(void 0) //undefined console.log(void 1) //undefined console.log(void "a") //undefined
void演算子は何に利用されるのか
aタグを用いても画面を読み込むことなく、onClickなどの関数を動作するためのトリガーにしたいとき次のコードのようにvoid演算子を用いてhref属性を”undefined”にすることことで、画面を読み込むことなく実行することができます。
(index.html)
<html> <head> <meta http-equiv="content-type" charset="utf-8"> </head> <body> <h2>void演算子</h2> <div id = "app" onClick="Click()">読み込まれるか判定</div> <a href="javascript:void(0);" onClick="Click()">hrefにvoid(0)</a><hr/> <a href="" onClick="Click()">hrefに何も記入なし</a><hr/> <script src="./test.js" ></script> </body> </html>
(test.js)
var app = document.getElementById("app") window.onload = function() { app.innerHTML= "Windowが読み込まれてしましました" } function Click(){ app.innerHTML= "Windowが読み込まれずにクリックできました" }
ですが別にvoid演算子を用いなくても次のコードのようにCSSなどを用いれば同じ動作を実装できます。(JavaScriptのファイルは上記と同じ)
(index.html)
<html> <head> <meta http-equiv="content-type" charset="utf-8"> <style> #nohref { cursor:pointer; text-decoration: underline; color: blue; } #nohref:active{color:red;} </style> </head> <body> <h2>void演算子なし</h2> <div id = "app" onClick="Click()">読み込まれるか判定</div> <a href="javascript:void(0);" onClick="Click()">hrefにvoid(0)</a><hr/> <a id = "nohref"onClick="Click()">hrefも記入されていない(CSSver)</a><hr/> <a href="" onClick="Click()">hrefに何も記入なし</a><hr/> <script src="./test.js" ></script> </body> </html>
この記事のまとめ
本記事ではJavascriptのvoid演算子について説明しました!最後に記事の要点をまとめてみましょう。
- void演算子はundefinedを返す
- href属性にvoid演算子を用いることでaタグを用いても遷移することなく処理を実行できる
- でも実際にはCSSでも実行できる
JavaSscriptを用いて開発してみましょう!