event.preventDefault()

イベントプリベントデフォルト（イベント）

意味通常の動作キャンセル

event.preventDefault()とは？

イベントのデフォルトの動作を抑止するメソッドです。

event.preventDefault()の具体的な使い方

リンクのデフォルト動作の防止

<a href="https://www.example.com" id="myLink">クリックしてください</a>

<script>
const link = document.getElementById('myLink');

link.addEventListener('click', function(e) {
  e.preventDefault();
  console.log('リンクのデフォルト動作が防止されました。');
  console.log(`本来のリンク先: ${e.target.href}`);
});
</script>

リンクのクリックイベントに対してpreventDefault()を使用し、ページ遷移を防止します。代わりに、コンソールにメッセージと本来のリンク先を表示します。

event.preventDefault()に関するよくある質問

Q. preventDefault()の主な用途は？

A. 主な用途は、フォームの送信やリンクのクリックなど、ブラウザのデフォルト動作を止めることです。これにより、JavaScriptで独自の処理を行うことができます。

Q. 戻り値はありますか？

A. preventDefault()メソッドは戻り値を持ちません（undefined）。イベントのデフォルト動作を抑制するだけです。

Q. すべてのイベントで使えますか？

A. すべてのイベントで使用できるわけではありません。cancelableプロパティがtrueのイベントに対してのみ効果があります。例えば、loadイベントではpreventDefault()は効果がありません。

event.preventDefault()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのevent.preventDefault()やblur、contextmenu、animationend、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。