javascript:void(0) の意味と使用例

voidキーワードの紹介

まず、void キーワードは JavaScript で非常に重要なキーワードです。この演算子は、式を計算または実行することを指定しますが、値は返されません。

構文形式:

void関数()
void(関数())

例1

ハイパーリンクをクリックしても何も起こりません

<!-- 1. ユーザーがリンクすると、void(0) は 0 として計算され、ユーザーのクリックは効果がありません -->
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" >ここをクリックしても何も起こりません</a><br>

例2

void演算子内のコードを実行する

<!-- 2. void() 演算子内のコードを実行します -->
    <a href="javascript:void(alert('本当に従順ですね!!! ハハハ!!!'))" rel="external nofollow" >クリックすると警告ボックスが表示されます!!!</a><br>
    <a href="javascript:void(console.log('本当に従順ですね!!! ハハハ!!!'))" rel="external nofollow" >クリックするとコンソールに出力されます!!!</a><br>

例3

空演算子を使った算術演算

html:

<button type="button">クリックしてください</button>

js:

<script type="text/javascript">
        document.querySelector('button').addEventListener('click', 関数 () {
            変数a、b、c、d;
            a = void(b = 2, c = 3);
            console.log('a => ' + a);
            コンソールにログ出力します。
            console.log('c => ' + c);
            console.log('d => ' + d);
        });
    </スクリプト>

コンソール出力:

明らかに、2 は a に割り当てられ、3 は b に割り当てられ、a は d と同様に定義されているため、未定義です。

# javascript:void(0) との違い:

#設定したIDで目的地にジャンプできます

javascript:void(0) は動かずにそのままの状態のままです。これを「デッドリンク」と呼びます。

次の例のように:

<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" >クリックしてもいいよ、どうせ動かないから、ふふふ！ ！ ！ </a><br>
    <a href="#destination" rel="external nofollow" >クリックしてジャンプ</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h2 id="destination">目的地</h2>