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

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

確認環境
・Windows10
・Google Chrome

目次

イベントを無効化する

イベントオブジェクト.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オブジェクトはイベントリスナの引数として渡すことができます。

関連の記事

JavaScript イベントリスナを登録するサンプル(addEventListener)
JavaScript イベントリスナを削除するサンプル(removeEventListener)
JavaScript イベントのバブリングとキャンセルのサンプル(stopPropagation)
JavaScript イベントとイベントハンドラのサンプル

△上に戻る