Element: pointercancel イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。
pointercancel イベントは、ブラウザーがもうポインターイベントが存在しないと判断したとき、または pointerdown イベントが発生した後で、ポインターがビューポートのパン、ズーム、スクロールを操作するために使用されたときに発生します。
pointercancel イベントが発生する状況の例をいくつか示します。
- ポインターの操作を中止するハードウェアイベントが発生した場合。例えば、アプリケーション切り替えインターフェイスやモバイル端末の「ホーム」ボタンを使用して、ユーザーがアプリケーションを切り替えた場合などです。
- ポインターが活動中に端末の画面の向きが変化した場合。
- ユーザーが突然、ポインターの入力を始めたとブラウザーが判断した場合。これが発生するのは、例えば、スタイラスを使用中に画面上で手が反応するのを防ぐために掌を除外して予期せずイベントを起動することを防ぐことに、ハードウェアが対応している場合などです。
- CSS の
touch-actionプロパティが、入力の継続を防止している場合。 - ユーザーが同時に多くのポインターを操作すると、ブラウザーは既存のすべてのポインターに対してこのイベントを発生させる可能性があります（ユーザーがまだ画面に触れている場合でも）。
メモ:
pointercancel イベントの発生後、ブラウザーは pointerout イベントと、続いて pointerleave イベントを送信します。
構文
このイベント名を addEventListener() で使用します。
js
addEventListener("pointercancel", (event) => { })
または、インターフェイスのイベントハンドラープロパティに代入します。
js
onpointercancel = (event) => { }
イベント型
PointerEvent です。 Event を継承しています。
例
addEventListener() を使用した例です。
js
const para = document.querySelector("p");
para.addEventListener("pointercancel", (event) => {
console.log("Pointer event canceled");
});
onpointercancel イベントハンドラープロパティを使用した例です（ただし、これを使うと、onpointercancel で追加されていた他のイベントリスナーは置き換えられます）。
js
const para = document.querySelector("p");
para.onpointercancel = (event) => {
console.log("Pointer event canceled");
};
仕様書
| 仕様書 |
|---|
| Pointer Events # pointercancel |
| Pointer Events # dom-globaleventhandlers-onpointercancel |