JavaScript preventDefaultメソッドでイベントを無効化するサンプル
環境
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>
実行結果
チェックボックス「東京」はイベントを無効化するのでチェックできません。
チェックボックス「大阪」は何もしていないのでチェックできます。