イベントのデフォルトアクションの防止

イベントのデフォルトアクションを防止するには、eventオブジェクトのpreventDefault()メソッドを呼び出します。

event.preventDefault();Code language: CSS (css)

イベントハンドラが明示的にstopPropagation()メソッドを呼び出さない限り、イベントは通常どおり伝播し続けます。

次のチェックボックスがあるとします。

<input type="checkbox" name="ckAgree" id="ckAgree"> AgreeCode language: HTML, XML (xml)

クリックすると、その状態はチェック済になります。ただし、preventDefault()を使用すると、状態をチェック済みに変更しないようにできます。

const ck = document.querySelector('#ckAgree');

ck.addEventListener('click', function (e) {
  alert('Sorry! you cannot check this checkbox because of the preventDefault.');
  e.preventDefault();
});Code language: JavaScript (javascript)