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

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

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

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

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

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

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

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