JavaScriptにおけるデフォルトアクションのキャンセル

JavaScriptを使用してタグのデフォルトアクションをキャンセルする必要がある場合があります。例えば、リンクをクリックした際に、そのリンクへの遷移をキャンセルする場合です。これは一般に、単に何らかのコードを実行するためにリンクを使用している場合に必要とされます。この場合、リンクをクリックするとリンク先に遷移するという動作は全く不要です。

デフォルトアクションのキャンセルは、Event オブジェクトを使用して行います。そのためには、イベントハンドラ内の任意の場所で呼び出すべき特別なメソッド preventDefault() があります。

実際に試してみましょう。次のようなリンクがあるとします：

<a href="/" id="elem">リンク</a>

リンクをクリックしても別のページに遷移しないようにしてみましょう：

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	event.preventDefault();
	console.log('このリンクには移動できません！');
});

リンクが与えられています。リンクをクリックするとそのhrefが末尾に書き込まれ、リンクへの遷移が発生しないようにしてください。

2つの入力欄、段落、リンクが与えられています。入力欄には数値が入力されます。リンクをクリックすると入力された数値の合計が段落に書き込まれるようにしてください。