Event.cancelable

The cancelableEvent インターフェイスの読み取り専用プロパティで、イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。イベントがキャンセルできない場合、 cancelable プロパティは false となり、イベントが発生することをイベントリスナーが抑止することができないことを示します。

複数の種類のイベントを扱うイベントリスナーは、 preventDefault() メソッドを呼び出す前に cancelable をチェックしたほうが良いかもしれません。

ブラウザーネイティブのイベントのうち、キャンセル可能なもののほとんどは、ユーザーのページとの対話の結果から発生したものです。 click, scroll, beforeunload の各イベントをキャンセルすると、それぞれユーザーが何かをクリックすること、ページをスクロールすること、他のページに移動することをそれぞれ抑止することができます。

その他の JavaScript によって作成されたカスタムイベントは、作成時にキャンセル可能であるかどうかを制御します。

構文

bool = event.cancelable;

結果は Boolean で、イベントがキャンセル可能であれば true です。

例えば、ブラウザーベンダーは wheel イベントが、最初にリスナーが呼び出されたときのみキャンセル可能にしようと提案しています。 — その後の wheel イベントはキャンセルできません。

function preventScrollWheel(event) {
  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    // The event can be canceled, so we do so.
    event.preventDefault();
  } else {
    // The event cannot be canceled, so it is not safe
    // to call preventDefault() on it.
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener('wheel', preventScrollWheel);

メモ

イベントがキャンセル可能か不可能かは、イベントが初期化されたときに決定されます。

イベントをキャンセルするには、イベントの preventDefault() メソッドを呼び出してください。これはイベントに関連付けられた既定の動作を実行する実装を維持します。

仕様書

仕様書 状態 備考
DOM
Event.cancelable の定義
現行の標準
Document Object Model (DOM) Level 2 Events Specification
Event.cancelable の定義
廃止された 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
cancelableChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明