Element: pointerdown イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。
pointerdown イベントは、ポインターがアクティブになったときに発生します。マウスでは、その機器のボタンが押されていない状態から 1 つ以上のボタンが押されている状態に遷移したときに発生します。タッチ操作では、デジタイザーに物理的な接触が行われたときに発生します。ペンでは、スタイラスがデジタイザーに物理的に接触したときに発生します。
この動作は mousedown イベントとは異なります。物理的なマウスを使用する場合、マウスのいずれかのボタンを押すたびに mousedown イベントが発生します。pointerdown イベントは最初のボタンを押したときにのみ発生し、その後ボタンを押しても発生しません。
メモ:
直接操作ができるタッチ画面のブラウザーでは、 pointerdown イベントで暗黙的なポインターキャプチャが発生するため、ターゲットが以降のすべてのポインターイベントをキャプチャし、キャプチャターゲット上で発生したかのように扱います。そのため、 pointerover, pointerenter, pointerleave, pointerout はこのキャプチャーが発生している間は発生しません。このキャプチャはターゲット要素上で element.releasePointerCapture を呼び出すことで手動で解除することができ、 pointerup または pointercancel イベントの後で暗黙的に解除されます。
構文
addEventListener() でこのイベント名を使用してください。
addEventListener("pointerdown", (event) => { })
または、インターフェイスのイベントハンドラープロパティに代入します。
onpointerdown = (event) => { }
イベント型
PointerEvent です。 Event を継承しています。
例
addEventListener() を使用した例です。
const para = document.querySelector("p");
para.addEventListener("pointerdown", (event) => {
console.log("Pointer down event");
});
onpointerdown イベントハンドラープロパティを使用した例です（onpointerdown を使用して追加済みの他のイベントリスナーがある場合、それらは置き換えられます）。
const para = document.querySelector("p");
para.onpointerdown = (event) => {
console.log("Pointer down event");
};
仕様書
| 仕様書 |
|---|
| Pointer Events # pointerdown |
| Pointer Events # dom-globaleventhandlers-onpointerdown |