GlobalEventHandlers.onpointerdown

GlobalEventHandlers のイベントハンドラ onpointerdown は、ポインティングデバイスが最初に押されたときに発生する pointerdown イベントのイベントハンドラを指定するために使用します。 このイベントは、Window、Document、Element のオブジェクトに送信できます。

これは、マウスまたはマウスと互換性のあるデバイスでユーザーが操作したために生成された場合の mousedown イベントと機能的に同等です。 preventDefault() の呼び出しで pointerdown イベントがキャンセルされない場合、ほとんどのユーザーエージェントは mousedown イベントを発生させるので、ポインタイベントを使用していないサイトでも機能します。

addEventListener() を使用して、pointerdown イベントのリスナーを追加することもできます。

構文

target.onpointerdown = downHandler;

var downHandler = target.onpointerdown;

値

target の Element、Document、Window の pointerdown イベントを処理するための関数。 これは入力として pointerdown イベントを記述する PointerEvent を受け取ります。

例

この例では、onpointerdown を使用して pointerdown イベントを監視し、それに基づいて行動する方法を示します。 もちろん、addEventListener() を使うこともできます。

JavaScript

まず、pointerdown イベントを処理する JavaScript コードを見てみましょう。

var targetBox = document.getElementById("target");

targetBox.onpointerdown = handleDown;

function handleDown(evt) {
  var action;
 
  switch(evt.pointerType) {
    case "mouse":
      action = "clicking";
      break;
    case "pen":
      action = "tapping";
      break;
    case "touch":
      action = "touching";
      break;
    default:
      action = "interacting with";
      break;
  }
 
  targetBox.innerHTML = "<strong>Thanks for " + action + " me!</strong>";
  evt.preventDefault();
}

これは単に pointerdown イベントのイベントハンドラとして関数 handleDown() を確立するために onpointerdown を使います。

handleDown() 関数は、今度は pointerType の値を調べて使用されているポインティングデバイスの種類を判断し、その情報を使用して文字列をカスタマイズしてターゲットボックスの内容を置き換えます。

それから、イベントの preventDefault() メソッドを呼び出して、mousedown イベントがトリガーされないようにします。 そうしないで、ポインタイベントのサポートが欠けている場合に備えて、それらのイベント用のハンドラを持っていると、イベントが2回処理される可能性があります。

pointerup イベント用のハンドラもあります。

targetBox.onpointerup = handleUp;

function handleUp(evt) {
  targetBox.innerHTML = "Tap me, click me, or touch me!";
  evt.preventDefault();
}

このコードの役割は、ユーザーによる要素の操作が終了した後（例えば、マウスボタンを放したとき、またはスタイラスや指を画面から離したときなど）に、元のテキストをターゲットボックスに復元することです。

さらに、mouseup イベントが不必要にトリガーされないようにするために、イベントの preventDefault() メソッドを呼び出します。

<div id="target">
  Tap me, click me, or touch me!
</div>

#target {
  width: 400px;
  height: 30px;
  text-align: center;
  font: 16px "Open Sans", "Helvetica", sans-serif;
  color: white;
  background-color: blue;
  border: 2px solid darkblue;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

結果

結果の出力は次の通りです。 ボックスをタップ、クリック、タッチして、何が起こるかを確認してください。 最大の効果を得るには、さまざまなポインタタイプで試してください。

仕様

ブラウザーの互換性

関連情報

• Pointer events
• Pointer Events の使用
• 座標系
• Document: pointerdown イベント
• HTMLElement: pointerdown イベント