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

JavaScriptのイベントを無効化するサンプルです。
preventDefaultメソッドを使用します。動くサンプルもあります。

確認環境
・Windows10
・Google Chrome

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

イベントを無効化する

イベントオブジェクト.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>
function stopAction(e) {
	e.preventDefault();
}
const check1 = document.getElementById('check1');

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

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

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

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