Event.cancelable - キャンセル可能か?
cancelableは、Eventのプロパティです。イベントがキャンセル可能か否かを返します。キャンセルできる場合、preventDefault()を実行して規定の動作をキャンセルできます。
概要
- 名前
- cancelable
- 所属
- Event
- IDL
readonly attribute boolean cancelable;
- 仕様書
- https://dom.spec.whatwg.org/#dom-event-cancelable
説明
イベントがキャンセル可能な場合はtrue、違うならfalseを返す。
デモ
Event.cancelableのデモです。入力フォームにはfocusイベント、チェックボックスにはclickイベントを設定しました。前者はcancelableがfalseのため、規定の動作をキャンセルできません。そのため、フォーカスされます。後者はcancelableがtrueのため、規定の動作をキャンセルできて、チェックボックスにチェックが付くのを止められます。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
input#hoge {
width: 50% ;
font-size: 16px ;
}
div#result {
white-space: pre-wrap ;
}
</style>
</head>
<body>
<p><input id="hoge" type="text" value="入力要素"></p>
<p><label><input id="fuga" type="checkbox">チェックボックス</label></p>
<hr>
<div id="result"></div>
<script>
/** try it! **/
var callbackFn = function ( event ) {
console.log( event.cancelable ) ;
event.preventDefault() ;
resultElement.innerHTML = "" ;
resultElement.appendChild( new Text( "currentTarget: " + event.currentTarget + "(#" + event.currentTarget.id + ")" + "\n" ) ) ;
resultElement.appendChild( new Text( "cancelable: " + event.cancelable ) ) ;
} ;
document.getElementById( "hoge" ).addEventListener( "focus", callbackFn ) ;
document.getElementById( "fuga" ).addEventListener( "click", callbackFn ) ;
/** try it! **/
var resultElement = document.getElementById( "result" ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 19+ | ● | ● 6.0+ | ● | ● 9+ | ● | ● 6.0+ | ● 4.3+ |
関連記事
- GlobalEventHandlers.onselectstart
- onselectstartは、GlobalEventHandlersのイベントです。選択を開始した時にselectstartイベントが発生し、ここに設定したコールバック関数が呼び出されます。
- 何番目の要素か確認する
- 要素が何番目にあるのかを確認するには、配列系メソッドのindexOf()を利用しましょう。
- Event.defaultPrevented
- defaultPreventedは、Eventのプロパティです。イベントにおいて、規定の動作がキャンセルされたか否かを返します。
- Event.preventDefault()
- preventDefault()は、Eventのメソッドです。例えばリンクをクリックした時に遷移する、チェックボックスをクリックしたらチェックが入る、などの規定の動作を行ないません。イベントの伝播は止まりません。