DOM

：

：

Event.preventDefault() メソッド

　編集：2022.09.18 by T.A.

[Edge]。→、

イベント Event の処理動作をユーザー エージェントに通常どおりに行うべきではない事を伝えます。関連→defaultPrevented

このイベントは通常、イベントリスナーの 1 つが stopPropagation() または stopImmediatePropagation() を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。

後述のように、preventDefault() を EventTarget.dispatchEvent() によってディスパッチされたイベントのようなキャンセルできないイベントに対して、cancelable: true を指定せずに呼び出しても何も効果がありません。

構文
Event.preventDefault()
Event イベント オブジェクト（¶Event、MouseEvent、…）。
戻り値

例
既定のクリック処理のブロック

チェックボックスのクリック時、既定の動作ではチェック ボックスが切り替わります。この既定の動作を止める方法を以下に示します。

HTML： 

<p>チェックボックスコントロールをクリックしてください。</p>

<form>
  <label for="id-checkbox">チェックボックス:</label>
  <input type="checkbox" id="id-checkbox"/>
</form>

<div id="output-box"></div>

JavaScript： 

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
         document.getElementById("output-box").innerHTML += "ごめん！ <code>preventDefault()</code> がチェックさせません！<br>";
         event.preventDefault();
}, false);

HTML： 

<INPUT type=checkbox onclick="Job(event)">

JavaScript： 以下を組み込む 

function Job(eve){      //チェックボックスをクリックすると処理する：
  eve.preventDefault(); //ユーザー エージェントにイベント処理しないように通告する。
}

これでチェックボックスをクリックしてもチェックボックスは変化しなくなる。

テスト