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

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

イベントを無効化する

コード

サンプルのコードです。
2行目は、チェックできないチェックボックスです。
→7行目のpreventDefaultメソッドで無効化しています。
→10行目のイベントリスナで登録しています。
3行目は、チェックできるチェックボックスです。

<body>
	<input type="checkbox" id="check1" />チェックボックス1
	<input type="checkbox" id="check2" />チェックボックス2
</body>
<script>
function stopAction(e) {
	e.preventDefault();
}
t1 = document.getElementById('check1');
t1.addEventListener("click",function(e){ 
	stopAction(e);
});
</script>

サンプル

上記コードのサンプルです。
チェックボックス1はチェックできません。
チェックボックス2はチェックできます。

チェックボックス1 チェックボックス2

関連の記事

JavaScript ID値を指定して要素ノードを取得するサンプル(getElementById)
JavaScript タグ名を指定して要素ノードを取得するサンプル(getElementsByTagName)
JavaScript クラス名を指定して要素ノードを取得するサンプル(getElementsByClassName)
JavaScript 相対的な関係でノードを取得するサンプル(childNodes)
JavaScript 属性値を取得/設定するサンプル(getAttributeとsetAttribute)
JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)
JavaScript ノードを置換するサンプル(replaceChild)
JavaScript イベントリスナを登録するサンプル(addEventListener)
JavaScript イベントリスナを削除するサンプル(removeEventListener)
JavaScript イベントのバブリングとキャンセルのサンプル(stopPropagation)

 

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る