SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月8日 (日)
コンテンツを公開しました。