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

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

確認環境
・Windows10
・Google Chrome

目次

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

preventDefaultメソッド

イベントオブジェクト.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 イベントとイベントハンドラのサンプル

△上に戻る