preventDefaultとは何かについて簡単に説明します。

説明

リンクの遷移やフォームの送信など、ブラウザに最初から備わっている標準の動作（デフォルト動作）をキャンセルするためのメソッドです。

困ってしまうケース

preventDefault を使用しないと困ってしまうケースを紹介します。

クリックすると色が変わるボタンを aタグを使用して作成します。これをクリックすると、ボタンの色は変わりますが、画面TOPへ遷移してしまいます。

HTML

<a href="#" id="btn" class="sample">ホーム</a>

CSS

.sample {
  color: #000000;
  font-size: 1rem;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  border: 1px solid #296971;
}

.sample.active {
  color: #ffffff;
  background-color: #296971;
}

javascript

const btn = document.getElementById('btn');

btn.addEventListener('click', function (e) {
  btn.classList.toggle('active');
});

結果

ホーム

改善

preventDefault を使用すると、クリックしても画面TOPへ遷移しないようになります。HTML、CSSは変わりないので割愛します。

javascript

const btn = document.getElementById('btn');

btn.addEventListener('click', function (e) {
  e.preventDefault();
  btn.classList.toggle('active');
});

結果

ホーム

最後に

preventDefault をおまじないのように使っていましたが、理解が深まりました。