javascript void(0)について

javascript void(0)について

javascriptで、void(0)について記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 99.0.4844.51

void(0)

「a」タグの「onclick」属性利用時に、「href」に「javascript:void(0)」に利用すると「onclick」で指定すると、画面遷移されずに関数が実行されるようになれます。

<a href="javascript:void(0)" onclick="hoge()">リンク</a>

<script>

function hoge(){
  console.log('hoge')
}

</script>

実行結果

指定しない場合は、リンクが機能してページ遷移が発生します。

<a href="" onclick="hoge()">リンク</a>

<script>

function hoge(){
  console.log('hoge')
}

</script>

実行結果

void(0)の値

実際に、void(0)の値を確認すると、0ではなくても「undefined」となります。

console.log( void(0) ) // undefined

console.log( void(10) ) // undefined

console.log( void('hoge') ) // undefined

なので、リンクによる遷移が無効化されます。

遷移先を無効化

ただし、遷移先を無効化するだけであれば「href=”#”」とアンカーをすることもできます。

<a href="#" onclick="hoge()">リンク</a>

<script>

function hoge(){
  console.log('hoge')
}

</script>

実行結果