🚘

e.preventDefault()を使ってみた話。

2024/01/25に公開

HTML

はじめに

ある日、生のJavascriptでアコーディオンメニューを実装していた時にe.preventDefault()を使用しました。

e.preventDefault()とは？

e.preventDefault()とは、イベントオブジェクトに対して呼び出されるメソッドです。デフォルトのアクションをキャンセルし、イベントが実行されないように制御します。例えば、チェックボックスが切り替わる挙動であったり、リンクのクリック時にページ遷移をキャンセルするといった実装ができます。

参考は以下のWebサイトです。

e.preventDefault()を使ってみた

では、実際に実装してみました！今回は、「MDN Web Docs」さんのWebサイトにて紹介されていたコードを使用しました。

ディレクトリ構造

example(任意のフォルダ名)
- index.html
- *style.css（今回は使用していません）
- main.js

checkboxを実装

以下、スクリプトの内容です。

example/index.html

<body>
  <p>チェックボックスコントロールをクリックしてください。</p>

  <form>
    <label for="id-checkbox">チェックボックス:</label>
    <input type="checkbox" id="id-checkbox" />
  </form>

  <div id="output-box"></div>
</body>

example/main.js

document.addEventListener('DOMContentLoaded', ()=> {
  const checkbox = document.querySelector("#id-checkbox");
  checkbox.addEventListener('click', (e) => {
    const warn = "preventDefault() がこのチェックを妨害しています。<br>";
    document.getElementById("output-box").innerHTML += warn;
    e.preventDefault();
  })
})

lodallhostで確認すると、以下のような完成系になります。
⭐️ボタンクリック前

以下のように、チェックボックスをクリックすると、チェックは付かずに注意書きが表示されました。
⭐️ボタンクリック時

まとめ

今回はe.preventDefault()の使い方について、簡単にまとめました。
Javascriptにはイベントの種類が沢山あり、実装するたびに悩みます。これからも継続して発信できればと思っています。