Element: pointercancel イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.
pointercancel イベントは、ブラウザーがもうポインターイベントが存在しないと判断したとき、または pointerdown イベントが発生した後で、ポインターがビューポートのパン、ズーム、スクロールを操作するために使用されたときに発生します。
pointercancel イベントが発生する状況の例をいくつか示します。
- ポインターの操作を中止するハードウェアイベントが発生した場合。例えば、アプリケーション切り替えインターフェイスやモバイル端末の「ホーム」ボタンを使用して、ユーザーがアプリケーションを切り替えた場合などです。
- ポインターが活動中に端末の画面の向きが変化した場合。
- ユーザーが突然、ポインターの入力を始めたとブラウザーが判断した場合。これが発生するのは、例えば、スタイラスを使用中に画面上で手が反応するのを防ぐために掌を除外して予期せずイベントを起動することを防ぐことに、ハードウェアが対応している場合などです。
- CSS の
touch-actionプロパティが、入力の継続を防止している場合。 - ユーザーが同時に多くのポインターを操作すると、ブラウザーは既存のすべてのポインターに対してこのイベントを発生させる可能性があります（ユーザーがまだ画面に触れている場合でも）。
メモ:
pointercancel イベントの発生後、ブラウザーは pointerout イベントと、続いて pointerleave イベントを送信します。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("pointercancel", (event) => {});
onpointercancel = (event) => {};
イベント型
PointerEvent です。 Event を継承しています。
イベントプロパティ
このインターフェイスは MouseEvent および Event からプロパティを継承しています。
PointerEvent.altitudeAngle読取専用 Experimental-
トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
PointerEvent.azimuthAngle読取専用 Experimental-
Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
PointerEvent.pointerId読取専用-
イベントを発生させたポインターの固有の識別子です。
PointerEvent.width読取専用-
ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。
PointerEvent.height読取専用-
ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。
PointerEvent.pressure読取専用-
ポインター入力の正規化された圧力で、範囲は
0から1です。ここで0と1は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。 PointerEvent.tangentialPressure読取専用-
ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）で、
-1から1の範囲であり、0はコントロールの中立位置です。 PointerEvent.tiltX読取専用-
Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、
-90から90の範囲）。 PointerEvent.tiltY読取専用-
X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、
-90から90の範囲）。 PointerEvent.twist読取専用-
ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（
0から359の範囲の値）。 PointerEvent.pointerType読取専用-
イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
PointerEvent.isPrimary読取専用-
このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
例
addEventListener() を使用した例です。
const para = document.querySelector("p");
para.addEventListener("pointercancel", (event) => {
console.log("Pointer event cancelled");
});
onpointercancel イベントハンドラープロパティを使用した例です。
const para = document.querySelector("p");
para.onpointercancel = (event) => {
console.log("Pointer event cancelled");
};
仕様書
| Specification |
|---|
| Pointer Events # the-pointercancel-event |
| Pointer Events # dom-globaleventhandlers-onpointercancel |
ブラウザーの互換性
Loading…