🚘
e.preventDefault()を使ってみた話。
はじめに
ある日、生の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にはイベントの種類が沢山あり、実装するたびに悩みます。これからも継続して発信できればと思っています。
Discussion