PointerEvent: pointerType プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

pointerTypePointerEvent インターフェイスの読み取り専用プロパティで、特定のポインターイベントを引き起こした機器の種類(マウス、ペン、タッチのいずれか)を示します。

このイベントのポインターの種類です。対応している値は以下の文字列です。

"mouse"

このイベントはマウス機器によって生成されました。

"pen"

このイベントはペン機器またはスタイラス機器によって生成されました。

"touch"

このイベントは指などのタッチによって生成されました。

機器の種類がブラウザーで検出できない場合、値は空の文字列 ("") になります。 ブラウザーが上記以外のポインター機器の種類に対応している場合は、他の種類の機器と名前が競合しないように、値に ベンダー接頭辞 をつける必要があります。

この例は、pointerType プロパティの値を使用して適切なポインターの種類の処理関数を呼び出す方法を示しています。

js
targetElement.addEventListener(
  "pointerdown",
  (event) => {
    // 適切なポインターの種類のハンドラーを呼び出す
    switch (event.pointerType) {
      case "mouse":
        process_pointer_mouse(event);
        break;
      case "pen":
        process_pointer_pen(event);
        break;
      case "touch":
        process_pointer_touch(event);
        break;
      default:
        console.log(`pointerType ${event.pointerType} には対応していません`);
    }
  },
  false,
);

仕様書

Specification
Pointer Events
# dom-pointerevent-pointertype

ブラウザーの互換性

BCD tables only load in the browser