Event:preventDefault()

（Web API ＞ Event）
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

event.preventDefault()

Event オブジェクトの preventDefault メソッドを使用すると、イベントに対するデフォルトの動作を止めることができる。すべてのイベントでキャンセルが可能であるわけではなく、Event.cancelable プロパティの値が true のイベントのみキャンセル可能となる。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('リンクのデフォルトの動作をキャンセルしました');
});

上記の例では、querySelectorを使用して最初の要素を取得し、クリックイベントのリスナーを追加している。イベントリスナー関数内でevent.preventDefault()を呼び出している。
preventDefault()は、この場合、リンクがクリックされたときのデフォルトの挙動であるページ遷移を防止する。代わりに、コンソールに「リンクのデフォルトの動作をキャンセルしました」というメッセージが表示される。
preventDefault()は、フォームの送信イベントやリンクのクリックイベントなど、さまざまな場面で使用される。デフォルトの挙動をキャンセルし、代わりにカスタムの動作を実行することができる。

なお、preventDefault()はイベントオブジェクトのメソッドであるため、イベントリスナーのコールバック関数の引数としてイベントオブジェクトが渡される必要がある。上記の例では、イベントオブジェクトをeventとして受け取り、それを使用してpreventDefault()を呼び出している。

inserted by FC2 system