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 で最大接続数を設定するためのヒントのまとめ

推薦する

dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。

コンテナを通じてローカル パブリック IP アドレスを取得します。ローカル IP アドレスを使用して...

Reactフックとzarmコンポーネントライブラリ構成に基づいてh5フォームページを開発するためのサンプルコード

最近、React Hooks を zarm コンポーネント ライブラリと組み合わせて使用​​し、js...

ページ内にマーキーとフラッシュが共存する場合の競合解決

競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...

Dockerボリューム権限管理の詳細な説明

ボリュームデータボリュームは Docker の重要な概念です。データ ボリュームは、1 つ以上のコン...

Dockerを使用して開発環境を構築する方法を素早く習得します

プラットフォームが成長し続けるにつれて、プロジェクトの研究開発は、開発者向けのさまざまな外部環境、特...

MySQL における ${param} と #{param} の違い

${param}によって渡されるパラメータは、テーブル名やフィールド名を渡すなど、SQL文の一部と...

HTML リンク アンカー タグと SEO におけるその役割の概要

<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマーク...

CSS3 FlexBox の伸縮自在なレイアウトを 10 分で理解する

基本的な紹介特徴Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイ...

vmware16 仮想マシンに共有フォルダを設定する方法

1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...

MySQL インデックスの長さ制限の原理の分析

この記事は主に、MySQL インデックスの長さ制限の原理の分析を紹介します。サンプル コードを通じて...

CentOS 7 に MySQL 8 をインストールするための詳細なチュートリアル

準備するこの記事の環境情報: ソフトウェアバージョンセントOSセントOS7.4マイグレーション8.0...

SQL文でのgroup byの使用について簡単に説明します

1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...

VirtualBox は CentOS7 仮想マシンと拡張ツールをインストールします (画像とテキスト)

コンピュータシステム: win7この記事は主に写真に基づいており、多くの写真が含まれていますCent...

Windows 10でDockerコンテナのポートにアクセスできない問題に対する完璧な解決策

Windows 10 で Docker コンテナのポートにアクセスできない問題を解決する (ポート ...

HTMLの基礎を徹底解説（第1部）

1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...