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

推薦する

Centos 6.5 での mysql-community-server. 5.7.18-1.el6 のインストール

次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...

CSS スタイルを HTML 外部スタイルシートにインポートする方法

リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...

HTML テーブル タグ チュートリアル (36): テーブル ヘッダーの背景色属性 BGCOLOR

<TH> タグは、テーブル内のヘッダーのプロパティを設定するために使用されます。以下の...

JavaScript 配列重複排除問題の詳細な研究

目次序文 👀リサーチを始めましょう🐱‍🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...

docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル

目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...

MySQLコマンドが中国語で入力できない問題の解決方法

問題を見つける最近、MySQL コマンドを使用して MySQL サーバーに接続したときに、以下のよう...

HTML でテキスト ボックスのプロンプト機能を実装するさまざまな方法

HTML5の<input="text" placeholder="...

HTTP ステータス コード

このステータス コードは、リクエストのステータスに関する情報を提供し、サイトとリクエストされたページ...

WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...

MySQL の 6 つの一般的な制約タイプの詳細な説明

目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...

ウェブデザインでテキストのサイズを合わせる方法: 小さなテキスト、大きな体験

iPadなどのモバイル端末の普及により、人々がモバイル端末で読書に費やす時間はますます長くなり、読...

JavaScript と JQuery フレームワークの基本チュートリアル

目次1. JS オブジェクトDOM –1、機能–2、テスト3. jQuery –1. 概要–2、使用...

MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQLのダウンロードとインストール（バージョン8.0.20）のチュートリアルは参考までに、具体的...

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...

Linux sftp コマンドの使用法の概要

sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...