GlobalEventHandlers.onpointerdown

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

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

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

target.onpointerdown = downHandler;

var downHandler = target.onpointerdown;

関数 (Function) で、 pointerdown イベントがtarget で指定された Element, Document, Window に送られた場合に処理するためのものです。これは入力として 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;
}

結果

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

• ポインターイベント
• ポインターイベントの使用
• 座標系
• Document: pointerdown イベント
• HTMLElement: pointerdown イベント