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内の他の関連記事もぜひご注目ください！ 以下もご興味があるかもしれません:
|
<<: Ubuntu 19 以下に Android Studio をインストールするチュートリアル
>>: MySQL で最大接続数を設定するためのヒントのまとめ
推薦する
Webデザイン: スクリプト素材でユーザーエクスペリエンスを再構築
<br />原文: http://blog.rexsong.com/?p=1166ウェブ...
MySql ビュー トリガー ストアド プロシージャの詳細な説明
ビュー：一時テーブルを繰り返し使用する場合、将来の使用を容易にするために別名を付けることができます。...
RHCEはApacheをインストールし、ブラウザでIPにアクセスします
1. at は、5 時間後にルート ディレクトリの at_test ファイルに「これは at タスク...
Linux サーバーは最大いくつのポートを開くことができますか?
目次ポート関連の概念:ポートとサービスの関係1: nmapツールが開いているポートを検出する2: n...
MySQL に接続する際に Navicat for MySQL が 2005 エラーを報告する問題を解決する
前回の記事では、Navicat for Mysql 接続エラー 1251 (接続失敗) の問題を解決...
虫眼鏡コンポーネントのネイティブ js 実装
この記事の例では、参考までに虫眼鏡コンポーネントを開発するためのjsの具体的なコードを共有しています...
Vue-Routerのインストールと使用方法の詳細な説明
目次インストールルーティングの基本構成Vue にルーターをインストールするルーターの設定Router...
MySQL ファジークエリステートメントコレクション
SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...
Dockerは異常なコンテナ操作を排除する
この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...
フォーム OnSubmit と input type=image の使用の概要
ここに <input type="image"> がある場合、この画...
Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。
最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...
CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明
これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...
Vue.js を学ぶ際に遭遇する落とし穴
目次クラス void のポイントES6 矢印関数ヴュートファイvue-cli非同期と同期実行と展開ヒ...
CSSにスティッキー効果を追加する方法
前面に書かれたfilter:blur と filter:contrast がこのような素晴らしい化学...
Vueはechart円グラフの凡例のパーセンテージを表示するメソッドを実装します
この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...