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

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>
  • 最初のリンクをクリックしても何も起こりません。
  • 2番目のリンクをクリックすると、指定されたIDの場所(ページの下部)にリダイレクトされます。

これで、javascript:void(0) の意味と使用例に関するこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。

以下もご興味があるかもしれません:
  • javascript void (0) の意味と「#」との違いの説明
  • js における javascript:void(0) の使用法の詳細な説明
  • javascript:void(0) 関数の例
  • href=# と href=javascript:void(0) の違いについて簡単に説明します。

<<:  この記事は、Dockerにおけるcgroupの具体的な使用法を徹底的に理解するのに役立ちます。

>>:  丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

推薦する

CSSポジショニングによる階層関係の問題の詳細な説明

絶対、相対、固定位置の位置決めabsolue: 絶対配置。上、下、左、右を使用して、配置先の親要素に...

Ubuntu 20.04 aptの国内ソースを変更する方法

UPD 2020.2.26 現在、Ubuntu 20.04 LTSはまだリリースされていないため、チ...

React onClickにパラメータを渡す問題について話しましょう

背景下のようなリストでは、削除ボタンをクリックすると削除操作を実行する必要があります。 リスト生成:...

Centos6.5 でのスーパーバイザーのアップグレード、インストール、および構成に関するチュートリアル

スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

Mysqlはストアドプロシージャを通じて文字列を配列に分割します

文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...

Vue の this.$router と this.$route の違いと push() メソッド

公式文書には次のように記されている。ルーターを挿入することで、どのコンポーネントでも this.$r...

MySQL がデフォルト値を持つ NULL 列の使用を推奨しない理由

よく聞かれる答えは、列に NULL 値を使用するとインデックスが無効になるというものですが、実際にテ...

同じページを動的にロードするための Vue ルーティングリスニングの例

目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...

Web ページの HTML コードの説明: 順序付きリストと順序なしリスト

このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにお...

Reactコンポーネントのライフサイクル機能についての簡単な説明

React コンポーネントのライフサイクル機能とは何ですか?ライフサイクル関数は、ES6 構文クラス...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

vue-routeルーティング管理のインストールと設定方法

導入Vue Router 、 Vue.jsの公式ルーティング マネージャーです。 Vue.jsのコア...

Linux で Scala 環境を構築し、簡単な Scala プログラムを書く

Linux に Scala 環境をインストールするのは非常に簡単です。Ubuntu 環境であれば、さ...

Mysql通信プロトコルの詳細な説明

1.Mysql接続方法MySQL 通信プロトコルを理解するには、まず MySQL サーバーへの接続に...