イベントに対するデフォルトの動作をキャンセルする(preventDefault)

広告

HTML ページをブラウザで開いている場合、例えばリンクをクリックすればリンク先のページへ移動したり、チェックボックスをクリックすればチェックされ、マウスホイールを回転すると画面がスクロールするといったデフォルトの動作がいくつか設定されています。 Event オブジェクトの preventDefault メソッドを使用することで、イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができます。ここではイベントに対するデフォルトの動作をキャンセルする方法について解説します。

デフォルトの動作をキャンセルする

Event オブジェクトの preventDefault メソッドを使用すると、イベントに対するデフォルトの動作を止めることができます。書式は次のとおりです。

event.preventDefault()

すべてのイベントでキャンセルが可能ではありません。 Event.cancelable プロパティの値が true のイベントのみキャンセル可能です。

実際には次のように記述します。

let target = document.getElementById('xxx');

target.addEventListener('click', function(event){
    event.preventDefault();
});
サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<p>現在変更不可です</p>

<div>
<input type="checkbox" id="checkA">
<label for="checkA">Java</label>

<input type="checkbox" id="checkB">
<label for="checkB">PHP</label>
</div>

<script>
    let checkb = document.getElementById('checkB');

    checkb.addEventListener('click', function(event){
      alert('変更できません');
      event.preventDefault();
    });
</script>

</body>
</html>

2 つの input 要素があります。 2 つ目の input 要素には click イベントに対するイベントリスナーを登録し、イベントが発生した場合はアラートを表示したあと preventDefault メソッドを実行してデフォルトの動作をキャンセルしています。

最初に 1 つ目の input 要素をクリックしてみます。デフォルトの動作でチェックボックスをクリックするとオンとオフを繰り返します。

デフォルトの動作をキャンセルする(1)

次に 2 つ目の input 要素をクリックしてみます。 click イベントに対するイベントリスナーが呼び出され、アラートの表示を行ったあとでデフォルトの動作であるチェックボックスのオンとオフの切り替えをキャンセルします。その為、この input 要素をクリックしてもオンとオフとが切り替わりません。

デフォルトの動作をキャンセルする(2)

-- --

イベントに対するデフォルトの動作をキャンセルする方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。