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

2022年10月12日

環境
Google Chrome 106.0.5249.91
Windows 10 Home 64bit

構文
const 変数名 = document.getElementById(セレクター名);
変数名.addEventListener(“click", function (e) {
e.preventDefault();
});
addEventListenerを使ってイベントリスナを登録しています
「e.preventDefault()」メソッドを実行します。

使用例

<!DOCTYPE html>
<html>
<body>

<input type="checkbox" id="chkA" />東京
<p><input type="checkbox" id="chkB" />大阪</p>

<script>
  
 const ck = document.getElementById("chkA");
 // チェックボックスに対してイベントリスナを登録
 ck.addEventListener("click", function(e){
    // preventDefaultメソッドを実行
     e.preventDefault();
  });
  
</script>

</body>
</html>

実行結果
チェックボックス「東京」はイベントを無効化するのでチェックできません。
チェックボックス「大阪」は何もしていないのでチェックできます。

JavaScript

Posted by arkgame

関連記事: