このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: pointerover イベント

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。

pointerover イベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。

pointerover イベントには mouseover と同じ問題があります。対象要素に子要素がある場合、ポインターがそれらの境界を移動したときにも pointerout および pointerover イベントが発生します。対象要素自体の境界を移動したときに限りません。通常は、pointerenter および pointerleave イベントの方が適切に動作します。子要素内への移動に影響されないためです。

構文

addEventListener() でこのイベント名を使用してください。

js
addEventListener("pointerover", (event) => { })

または、インターフェイスのイベントハンドラープロパティに代入します。

js
onpointerover = (event) => { }

イベント型

PointerEvent です。 Event を継承しています。

Event UIEvent MouseEvent PointerEvent

例

addEventListener() を使用した例です。

js
const para = document.querySelector("p");

para.addEventListener("pointerover", (event) => {
  console.log("Pointer moved in");
});

onpointerover イベントハンドラープロパティを使用した例です(onpointerover を使用して追加済みの他のイベントリスナーがある場合、それらは置き換えられます)。

js
const para = document.querySelector("p");

para.onpointerover = (event) => {
  console.log("Pointer moved in");
};

仕様書

仕様書
Pointer Events
# pointerover
Pointer Events
# dom-globaleventhandlers-onpointerover

ブラウザーの互換性

関連情報