JavaScriptにおけるリンク遷移エラー

予期しないリンク遷移に関連するエラーについて詳しく見ていきましょう。例として、以下のようなリンクが与えられているとします：

<a href="">link</a>

リンクを変数に取得しましょう：

let link = document.querySelector('a');

このリンクにクリックイベントハンドラをバインドします：

link.addEventListener('click', function() {
	console.log(this.textContent);
});

ここで予期しない事態が起こります。コードは正しく書かれていますが、コンソールに出力が現れません。その理由は、クリック時にリンクへの遷移が発生するためです。属性 href に何も指定されていないため、リンクは単に現在のページを指しています。

つまり、リンクをクリックするとページがリロードされます。データはコンソールに出力されますが、その後ページが再読み込みされ、コンソールが空になります。

注意深く観察すると、クリックの瞬間にデータが一瞬コンソールに表示され、その後消えるのが分かります。これがこのエラーの特徴的な兆候です。

この問題を解決する方法を見ていきましょう。

解決策 1

リンクの href にハッシュ記号（#）を設定します。これにより、リンクは現在のページ内の特定の場所を指し示し、リンクをクリックしてもリロードは発生しません。実装してみましょう：

<a href="#">link</a>

より高度な方法は、 preventDefault メソッドを使用してデフォルトの動作をキャンセルすることです：

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});