このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Element: pointerdown イベント
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月.
pointerdown イベントは、ポインターがアクティブになったときに発生します。マウスでは、その機器のボタンが押されていない状態から 1 つ以上のボタンが押されている状態に遷移したときに発生します。タッチ操作では、デジタイザーに物理的な接触が行われたときに発生します。ペンでは、スタイラスがデジタイザーに物理的に接触したときに発生します。
メモ:
直接操作ができるタッチ画面のブラウザーでは、 pointerdown イベントで暗黙的なポインターキャプチャが発生するため、ターゲットが以降のすべてのポインターイベントをキャプチャし、キャプチャターゲット上で発生したかのように扱います。そのため、 pointerover, pointerenter, pointerleave, pointerout はこのキャプチャーが発生している間は発生しません。このキャプチャはターゲット要素上で element.releasePointerCapture を呼び出すことで手動で解除することができ、 pointerup または pointercancel イベントの後で暗黙的に解除されます。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("pointerdown", (event) => {});
onpointerdown = (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("pointerdown", (event) => {
console.log("Pointer down event");
});
onpointerdown イベントハンドラープロパティを使用した例です。
const para = document.querySelector("p");
para.onpointerdown = (event) => {
console.log("Pointer down event");
};
仕様書
| Specification |
|---|
| Pointer Events # the-pointerdown-event |
| Pointer Events # dom-globaleventhandlers-onpointerdown |
ブラウザーの互換性
Loading...