DOM

Event.cancelable プロパティ

 編集:2022.09.18 by T.A.

[Edge]。読取専用。→

イベント Event イベントがキャンセル可能か否かを示します。

※ イベントをキャンセルすると、例えば INPUT 要素で type=checkbox の場合、イベント キャンセルするとチェック ボックスがオン/オフされなくなります。→preventDefault

イベントがキャンセルできない場合、cancelable プロパティは false となり、イベントが発生することをイベント リスナーが抑止することができないことを示します。

¶省く

イベントをキャンセルするには、そのイベントに対して preventDefault() メソッドを呼び出してください。これにより、実装はイベントに関連付けられた既定のアクションを実行しないようになります。

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

構文
Event.cancelable
Event イベント オブジェクト(¶EventMouseEvent、…)。

論理値で、イベントがキャンセル可能であれば 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);

HTML:

<INPUT onclick="Job(event)" type=checkbox>

JavaScript:

function Job(eve){       //イベントが有ったときに呼び出される関数:eveにeventオブジェクトが入る。
  alert(eve.cancelable); //イベントがキャンセルできるか否かを表示。
  eve.preventDefault();  //イベントをキャンセルする。
  alert("ブラウザーにこのイベントの実行するべきないと伝えました。"); //テスト表示。
}

イベントをキャンセルしたからといっても、その後の処理は続く。


テスト