JavaScript を使用してハイパーリンクのリダイレクトを防ぐ方法 (複数の書き方)

JavaScript を使用してハイパーリンクのリダイレクトを防ぐ方法 (複数の書き方)

JavaScript を使用すると、ハイパーリンクがジャンプするのを防ぐことができます。

方法は次のとおりです。

（１）ハイパーリンクのhref属性の操作

書き方1：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <a href="javascript:void(0);" rel="external nofollow" >ハイパーリンク</a>
</本文>
</html>

書き方2：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <a href="javascript:;" rel="external nofollow" >ハイパーリンク</a>
</本文>
</html>

リンクをクリックしてもリダイレクトされません。

（２）リンクをブロックするデフォルトの動作

書き方1：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<meta http-equiv="X-UA-compatible" content="IE=edge">
	<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
	<title>ドキュメント</title>
</head>
<本文>
	<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" >バイドゥ</a>
	<スクリプト>
		var link = document.querySelector("a");
		link.addEventListener('click',function(e){
			e.preventDefault();
		})
	</スクリプト>
</本文>
</html>

書き方2：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<meta http-equiv="X-UA-compatible" content="IE=edge">
	<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
	<title>ドキュメント</title>
</head>
<本文>
	<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" >バイドゥ</a>
	<スクリプト>
		var link = document.querySelector("a");
		link.onclick = 関数 (e) {
			false を返します。
		}
	</スクリプト>
</本文>
</html>

現時点では、ハイパーリンクをクリックしてもジャンプしません。

以上がJavaScriptを使ってハイパーリンクジャンプを防ぐ方法（書き方いろいろ）の詳細です。jsハイパーリンクジャンプについての詳細は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください！

以下もご興味があるかもしれません:
  • JS のページ間のハイパーリンクジャンプで中国語の文字化けが発生する問題の解決方法
  • JavaScript でハイパーリンク リダイレクトを無効にする方法
  • JavaScript を使用してハイパーリンクの絶対 URL アドレスを取得する方法
  • ハイパーリンクを使用して JavaScript 関数を正しく呼び出す方法
  • パラメータを渡す 4 つの形式 - URL、ハイパーリンク、js、フォーム
  • JavaScript でタグ ハイパーリンクのデフォルト イベントを処理する方法
  • jsはタグハイパーリンクを使用してフォームを送信するメソッドを実装します

<<:  Ubuntu 19 以下に Android Studio をインストールするチュートリアル

>>:  MySQL で最大接続数を設定するためのヒントのまとめ

推薦する

CSS3 のフィルタプロパティの使用に関する詳細な説明

最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。...

elasticsearchを使用してインデックスデータを定期的に削除する

1. ESを使うこともあるリソースが限られている、またはビジネス上のニーズにより、最新の期間のデータ...

Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析

nGrinderとは何ですか? nGrinder は、スクリプトの作成、テストの実行、監視、結果レポ...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...

Mybatis mysqlの削除操作では、最初のデータメソッドのみを削除できます。

バグ図のように、削除文とパラメータをデータベースにコピーして実行し、2つのデータを削除しようとしたの...

ミニプログラムは左スライドのドロワーメニューをネイティブに実装します

目次WXS レスポンス イベントプランAページ構造とスタイルWXS イベントコールバック関数WXS ...

nginx+lua を使用した単一マシンでの何万もの同時接続の実装

nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...

MySQL マスター スレーブ データが矛盾しています。プロンプト: Slave_SQL_Running: 解決策はありません

この記事では、MySQL マスターとスレーブ データ間の不一致の解決方法と、プロンプト「Slave_...

Nginx を使用してポート転送 TCP プロキシを実装する例

目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...

JavaScript 戦略パターンを使用してフォームを検証する方法

目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...

Linux カーネルの探究: Kconfig の秘密

Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...

Dockerボリュームのファイルマッピング方法

背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...