--- title: 'HTMLElement: pointercancel イベント' slug: Web/API/HTMLElement/pointercancel_event tags: - DOM - Event - Pointer Events - PointerEvent - Reference - pointercancel - user input translation_of: Web/API/HTMLElement/pointercancel_event ---

pointercancel イベントは、これ以上ポインタイベントがないとブラウザーが判断したとき、または {{event("pointerdown")}} イベントが発生した後に、パン、ズーム、スクロールによってビューポートを操作するためにポインタを使用する場合に発生します。

バブリング	あり
キャンセル	不可
インターフェイス	{{domxref("PointerEvent")}}
イベントハンドラプロパティ	`onpointercancel`

pointercancel イベントを引き起こす状況の例

ポインタの活動をキャンセルするハードウェアイベントが発生した。これには、例えば、アプリ切り替えインターフェイスやモバイルデバイスの「ホーム」ボタンを使用したユーザーのアプリ切り替えが含まれる場合があります。
ポインタがアクティブなときに、デバイスの画面の向きが変わった。
ブラウザーが、ユーザーが誤ってポインタ入力を開始したと判断した。これは、例えば、スタイラスを使用しているときにディスプレイ上に手を置いて誤ってトリガしないように、ハードウェアが手のひら拒否をサポートしている場合に発生する可能性があります。
{{cssxref("touch-action")}} CSS プロパティが、入力を続行しないようにした。

pointercancel イベントが発生した後、ブラウザーは {{event("pointerout")}} とそれに続く {{event("pointerleave")}} も送信します。

例

addEventListener() を使用する場合

const para = document.querySelector('p');

para.addEventListener('pointercancel', (event) => {
  console.log('ポインタイベントがキャンセルされた');
});

onpointercancel イベントハンドラプロパティを使用する場合

const para = document.querySelector('p');

para.onpointercancel = (event) => {
  console.log('ポインタイベントがキャンセルされた');
};

仕様

仕様	状態
{{SpecName('Pointer Events', '#the-pointercancel-event')}}	{{Spec2('Pointer Events')}}

例

仕様

ブラウザーの互換性

関連情報