タグのhref属性とonclickイベントの使用例

タグのhref属性とonclickイベントの使用例

a タグは主にページ ジャンプを実装するために使用され、これは href 属性または onclick イベントを通じて実現できます。

コードをコピー
コードは次のとおりです。

<a onclick="window.location.href='www.jb51.net'" href="javascript:void(0);">123WORDPRESS.COM</a>

このコードは主流のブラウザでは正常に動作しますが、IE6 では動作しません。その理由は何でしょうか?

コードをコピー
コードは次のとおりです。

javascript:void(0);

void(arg); は常に null を返す関数として理解できますが、そのパラメーターは空にできません。パラメータには任意の式や関数を使用できます。

コードをコピー
コードは次のとおりです。

<a href="javascript:void(name = '123WORDPRESS.COM'); alert(name);">テスト</a>

テスト

IE6 はまず onclick などの DOM 自体にバインドされたイベントを実行します。バブリングが防止されていない場合は、href 属性が順番に実行されます。また、void(0); はイベントを実行する必要がないため、IE6 はブラウザーにイベントを実行しないように指示し (前のアクションを上書きします)、バブリングを終了することは return false; と同等であるため、ブラウザーはアクションを実行しません。したがって、onclick イベント内でのバブリング イベントを防止するだけです。

コードをコピー
コードは次のとおりです。

<a onclick="window.location.href='https://www.jb51.net';return false;" href="javascript:void(0);">123WORDPRESS.COM</a>

これは IE6 でも正常に実行されます。

もう 1 つの方法は、javascript:void(0); の代わりに # を使用することです。href 属性の # は、もともとアンカー #name を意味するため、アンカーが指定されていない場合は、ページの先頭に移動します。 # には特定の意味があります。デフォルトは #top です。# の後に内容がある場合はタグとみなし、ページ上で該当するタグを見つけてその場所へジャンプします。見つからない場合はページの先頭へジャンプします。ジャンプしたくない場合は ### を使用できます。### は意味のないタグ指定です。

<<:  Vue でバイナリ ファイル ストリームを受信して​​ PDF プレビューを実現する方法

>>:  CSS ボックスモデル内のパディングと略語の詳細な説明

推薦する

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

JavaScript の基礎: スコープ

目次範囲グローバルスコープ関数のスコープもし、スイッチ、のために、その間ブロックスコープスコープチェ...

ウェブページの画像最適化ツールと使用方法のヒントの共有

ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

JavaScript フォーム検証の例

HTML フォームは、名前、電子メール アドレス、場所、年齢などのユーザー情報を収集するためによく使...

Linux でローカル コンピューターとリモート サーバーのポートが接続されているかどうかを確認する方法

以下のように表示されます。 1. ssh -v -p [ポート番号] [ユーザー名]@[IPアドレス...

MAC+PyCharm+Flask+Vue.js ビルドシステム

目次node.js+nvm+npm を設定するnpmスイッチタオバオミラーVue.jsをインストール...

Linux での wget コマンドの基本的な使い方

目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...

Linux のバックグラウンドで実行するいくつかの方法 (まとめ)

1. ノーフープハングアップ信号を無視してプログラムを実行する追加メモnohup コマンドは、ハン...

ドメイン名を指定されたポートに転送するようにNginxを設定する方法

/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...

Centos8 に nginx1.9.1 をインストールする詳細な手順

1.17.9 本当はもっと美味しいNginx のダウンロード アドレス: https://nginx...

MySQL 8.0.11 の詳細なインストール手順

この記事では、参考までにMySQL 8.0.11のインストール手順を紹介します。具体的な内容は次のと...

DockerでMySQLマスタースレーブ環境を構築する方法の詳しい説明

序文この記事では、docker-compose と dockerfile を使用して、binlog ...

モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

この記事の例では、モバイル紅包雨機能ページを実現するためのHTMLの具体的なコードを共有しています。...

Centos8 で yum を使用して rabbitmq をインストールするチュートリアル

/etc/yum.repos.d/フォルダに入るrabbitmq-erlang.repo ファイルを...