Event.preventDefault() - 規定の動作をキャンセル
preventDefault()は、Eventのメソッドです。例えばリンクをクリックした時に遷移する、チェックボックスをクリックしたらチェックが入る、などの規定の動作を行ないません。イベントの伝播は止まりません。
概要
- 名前
- preventDefault
- 所属
- Event
- IDL
void preventDefault();
- 仕様書
- https://dom.spec.whatwg.org/#dom-event-preventdefault
説明
引数はありません。返り値もありません。
デモ
Event.preventDefault()のデモです。2つのチェックボックスにclickイベントを設定し、上の場合だけ、メソッドを実行するようになっています。規定の動作がキャンセルされると、チェックが入らないことを確認して下さい。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<body>
<p><label><input id="hoge" type="checkbox">チェックボックス1 (キャンセルあり)</label></p>
<p><label><input id="fuga" type="checkbox">チェックボックス2 (キャンセルなし)</label></p>
<script>
/** try it! **/
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;
var callbackFn = function ( event ) {
if ( event.target === element1 ) event.preventDefault() ;
} ;
element1.addEventListener( "click", callbackFn ) ;
element2.addEventListener( "click", callbackFn ) ;
/** try it! **/
var resultElement = document.getElementById( "result" ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- Event.stopPropagation()
- stopPropagation()は、Eventのメソッドです。現在のイベントで、イベントの伝播を終了させます。
- InputEvent()
- InputEvent()は、InputEventのコンストラクタです。新しいオブジェクトを作成します。
- Event.stopImmediatePropagation()
- stopImmediatePropagation()は、Eventのメソッドです。同じオブジェクトの同じイベントに複数のリスナーが設定されている場合、このメソッドを実行すると、その時点で他のリスナーを実行しません。
- mousedownイベント
- mousedownイベントは、マウスボタンを押した時に発生するイベントです。