Element: pointerout イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。
pointerout イベントはいくつかの理由で発生します。ポインティングデバイスが要素のヒットテスト境界を出たとき、ホバーに対応していない端末で pointerup イベントが発生したとき (pointerup を参照)、 pointercancel イベントが発生した後 (pointercancel を参照)、スタイラスペンがデジタイザーで検出可能なホバー範囲を離れたとき、などです。
pointerout イベントには mouseout と同じ問題があります。対象要素に子要素がある場合、ポインターがそれらの境界を移動したときにも pointerout および pointerover イベントが発生します。対象要素自体の境界を移動したときに限りません。通常は、pointerenter および pointerleave イベントの方が適切に動作します。子要素内への移動に影響されないためです。
構文
addEventListener() でこのイベント名を使用してください。
js
addEventListener("pointerout", (event) => { })
または、インターフェイスのイベントハンドラープロパティに代入します。
js
onpointerout = (event) => { }
イベント型
PointerEvent です。 Event を継承しています。
例
addEventListener() を使用した例です。
js
const para = document.querySelector("p");
para.addEventListener("pointerout", (event) => {
console.log("Pointer moved out");
});
onpointerout イベントハンドラープロパティを使用した例です（onpointerout を使用して追加済みの他のイベントリスナーがある場合、それらは置き換えられます）。
js
const para = document.querySelector("p");
para.onpointerout = (event) => {
console.log("Pointer moved out");
};
仕様書
| 仕様書 |
|---|
| Pointer Events # pointerout |
| Pointer Events # dom-globaleventhandlers-onpointerout |