javascript
// リンク要素を取得
const myLink = document.getElementById('myLink');
// クリック回数のカウンター
let clickCount = 0;
// クリックイベントのリスナーを追加
myLink.addEventListener('click', function(event) {
// デフォルトのリンク遷移をキャンセル
event.preventDefault();
// クリック回数をインクリメント
clickCount++;
// リンク先のURL
let linkURL;
// クリック回数に応じてリンク先のURLを設定
if (clickCount === 1) {
linkURL = 'https://news.yahoo.co.jp/'; // 1回目のリンク先のURL
// 別ウィンドウでリンクを開く
window.open(linkURL, '_blank');
} else if (clickCount === 2) {
linkURL = 'https://news.livedoor.com/'; // 2回目のリンク先のURL
// 別ウィンドウでリンクを開く
window.open(linkURL, '_blank');
} else {
linkURL = 'https://itkagyo.com/'; // 3回目以降のリンク先のURL
// 同じウィンドウでリンクを開く
window.location.href = linkURL;
}
});
-
リンク要素の取得
document.getElementById('myLink')を用いて、HTML内に設定したidが’myLink’のリンク要素を取得します。その結果をmyLinkという定数に格納します。これにより、JavaScriptからこのリンク要素を操作することが可能になります。 -
クリック回数のカウンターの設定
let clickCount = 0;を用いて、クリック回数を記録するカウンターを初期化します。このカウンターはリンクがクリックされるたびに増加します。 -
クリックイベントのリスナーの追加
myLink.addEventListener('click', function(event) {...}で、リンクがクリックされたときに実行される関数（リスナー）を設定します。この関数ではリンクの挙動が制御されます。 -
デフォルトのリンク遷移のキャンセル
event.preventDefault();で、デフォルトのリンク遷移（リンクがクリックされたときに自動的に行われるページの移動）をキャンセルします。これにより、リンクの動作を自由に制御することが可能になります。 -
クリック回数のインクリメント
clickCount++;でクリック回数を1つ増加させます。 -
クリック回数に応じたリンク先URLの設定とリンクの開き方の制御
if (clickCount === 1) {...} else if (clickCount === 2) {...} else {...}で、クリック回数に応じてリンク先のURLを設定し、そのリンクがどのように開くかを制御します。
HTML
<a href="https://itkagyo.com/" id="myLink">1回目ではいけないリンク</a>３つの実用例
研修用リンク
この方法は、新入社員の研修に使えます。初回と二回目のクリックでは基本的な情報を提供し、3回目のクリック以降でより深い情報を提供することで、段階的な学習を実現できます。
マーケティングキャンペーン
マーケティングキャンペーンでこの機能を活用します。初回と二回目のクリックではプロモーション情報を表示し、3回目のクリック以降で製品やサービスの詳細ページに誘導します。
ゲームやクイズのWebサイト
ゲームやクイズのWebサイトで使用します。クリックする度に異なるページやヒントが表示されることで、ユーザーの興味や参加意欲を引き立てます。
これやられるとユーザーは嫌なので、使わないことをおすすめします。
コメント