JavaScript イベントを無効化する(preventDefault)

JavaScriptのpreventDefaultメソッドで、イベントを無効化するサンプルです。

サンプル	preventDefaultメソッド
	イベントを無効化するサンプル

preventDefaultメソッド

イベントオブジェクト.preventDefault();

preventDefaultを使用することでイベントを無効化します。
イベントオブジェクトのメソッドです。
以下は、MDNのpreventDefaultメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

イベントを無効化するサンプル

クリックイベントを無効化するサンプルです。

チェックボックス1はイベントを無効化するのでチェックできません。
チェックボックス2は何もしていないのでチェックできます。

チェックボックス1 チェックボックス2

上記サンプルのコードです。

<input type="checkbox" id="check1" />チェックボックス1
<input type="checkbox" id="check2" />チェックボックス2

<script>
  const check1 = document.getElementById("check1");

  check1.addEventListener("click", function (e) {
    e.preventDefault();
  });
</script>

1行目と2行目にチェックボックスがあります。

7行目は、1行目のチェックボックスに対してイベントリスナを登録しています。
8行目は、preventDefaultメソッドを実行します。
そのため1行目のチェックボックスはチェックすることができません。

7行目のfunction(e)のeは、Eventオブジェクトです。Eventオブジェクトはイベントリスナの引数として渡すことができます。